Component Lifecycles

The component life cycles graph done in this site, https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/, and it is perfect. Here is the image I capture from this site. You should go there to see the newest version. Here is current version 16.4.

1. constructor(props). It will called when the component is being initiated. You should include super(props) at the beginning.
2. getDerivedStateFromProps(props, state). It will be called right after the constructor, or when the props, or state is updated, or the component's forceUpdate(callback) being called.
3. shouldComponentUpdate(nextProps, nextState). It will be called after the getDerivedStateFromProps(props, state) triggered by props or state updated only. It should return true if the component need to update, or false otherwise.
4. render(). By this far, you should know it normal user for creating the component UI by JSX (or another hard way).
5. getSnapshotBeforeUpdate(prevProps, prevState). This method is not commonly use. See https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate
6. componentDidMount(). Called after the component constructed, and first rendered.
7. componentDidUpdate(prevProps, prevState, snapshot). Called after the component is rendered after props, state updated, or forceUpdated() is called.
8. componentWillUnmount(). Called after a component is unmounted. Happen usually for a parent component unmount a child component.

1. componentWillMount(), or UNSAFE_componentWillMount()
2. componentWillUpdate(), or UNSAFE_componentWillUpdate()
3. componentWillReceiveProps(), or UNSAFE_componentWillReceiveProps()