renderDemo.jsx

import React from "react";
import { render } from "react-dom";

const log = name => {
  console.log("----------------------");
  console.log(name);
};

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    log("Constructor");
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    log("getDerivedStateFromProps");
    return null;
  }

  componentDidMount() {
    log("componentDidMount");
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    log("ComponentDidUpdate");
  }

  componentWillUnmount() {
    log("componentWillUnmount");
  }

  shouldComponentUpdate(nextProps, nextState) {
    log("shouldComponentUpdate");
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    log("getSnapshotBeforeUpdate");
    return null;
  }

  render() {
    log("render");
    return (
      <div>
        <b>Example Component</b>
      </div>
    );
  }
}

class Root extends React.Component {
  constructor(props) {
    super(props);
    this.state = { vals: 0, visible: false };
  }

  toggle = () => {
    log(`*** Triggering ${this.state.visible ? "Unmount" : "Mount"} ***`);
    this.setState(state => ({ visible: !state.visible }));
  };

  update = () => {
    log("*** Triggering Update ***");
    this.setState(state => ({ vals: state.vals + 1 }));
  };

  render() {
    return (
      <div>
        <h2>The Component Lifecycle in React 16.3</h2>
        {this.state.visible && <Example />}
        {this.state.visible && <button onClick={this.update}>Update</button>}
        <button onClick={this.toggle}>
          {this.state.visible ? "Remove" : "Add"} Component
        </button>
      </div>
    );
  }
}

render(<Root />, document.getElementById("root"));