React JS. Lifecycle Methods

React components encapsulate parts of the UI. Your full React application UI is rendered as a tree of many nested components.
In the process of working, the component passes throug a series of stages of the life cycle.
The React life cycle follows the common Birth, Growth, and Death flow.
The React team has provided a series of methods you can implement/override to tap into the process.
Phase 1: Birth / Mounting
The first phase of the React Component life cycle is the Birth/Mounting phase. This is where we start initialization of the Component. At this phase, the Component’s props and state are defined and configured.
✔️Constructor

The constructor for a component will be called once per application (if you refresh the page in your browser then it’s considered a new application).
✔️ComponentWillMount

The componentWillMount() method is called before the component is mounted, so there is no component yet. You can call this.setState() here if you want. The props obviously are not accessible.
✔️ComponentDidMount
Here, the component is already mounted, and you can perform any work that needs to access the component in the context of the virtual DOM.

The component already exists, so its properties (props) can be accessed and displayed
Phase 2: Growth / Update
Once the component is mounted, it can be rendered. Every now and then, the state of the component or the props it receives from its container may change.
There are four methods involved in the update process, and I’ll cover them in order.
✔️ComponentWillReceiveProps

The componentWillReceiveProps() method is called when new props are received from the container. You have access to the current props via this.props and to the next props via the nextProps parameter.
✔️ShouldComponentUpdate
The shouldComponentUpdate() is a key method.
( after
componentWillReceiveProps()is called )

💡 This method allows your Component to exit the Update life cycle if there is no reason to apply a new render.
Out of the box, the shouldComponentUpdate() is a no-op that returns true.
This means every time we start an Update in a Component, we will re-render.
But if you implement it and return ‘false’, then the component and its child components will not be rendered.
✔️ComponentWillUpdate
Once we have determined that we do need to re-render in our Update phase, the componentWillUpdate()will be called.
The method is passed in two arguments: nextProps and nextState.

The method componentWillUpdate() is similar to componentWillMount(), and many of the same considerations and tasks are the same.
The difference being that componentWillUpdate() is called every time a re-render is required, such as when this.setState() is called.
Unlike componentWillMount() we get access to the next props and state
Just like componentWillMount(), this method is called before render()
✔️ComponentDidUpdate
Finally, after the rendering, the componentDidUpdate() method is called. It's OK to call this.setState() here because the rendering for the previous state change has been completed already.

Phase 3: Growth / Update
After our Component has spent time in the Update phase, we eventually enter the Death phase.
Components can be unmounted and mounted again, and there can be errors during the lifecycle of a component.
✔️ComponentWillUnmount
If a component is not rendered by its container, it is unmounted from the virtual DOM and the unmounted component’s componentWillUnmount() method is called.

When the user deselects the checkbox, the SomeComponent is still rendered, but it doesn’t render its child components, which get unmounted.
✔️ComponentDidCatch

The componentDidCatch() method was added recently in React 16. It is designed to help with an error during rendering that previously resulted in obscure error messages.
RESOURCES
PDF cheatsheets to help you find the right tool at the right time.

