In a React application, components are created dynamically, according to the evolution of the application at runtime. A user's interaction starts a component's creation, its visualization, its updates on the screen, and its destruction.
So, components go through different phases during application execution: these phases represent their lifecycles.
React allows us to intercept and manage the phases of a component's lifecycle in a customized way, thanks to a set of events that we can handle by implementing specific methods.
Before analyzing a component's lifecycle events, we should highlight that the first step in creating a component is the execution of its constructor. Although it is not one of React's lifecycle phases, it is the first step of a component's life. During the component's constructor execution, the DOM is not available, and it is not possible to access any child component. The constructor execution is the right time to perform the initializations that don't concern graphic rendering or child manipulation.
After component creation, React will trigger a few events corresponding to the respective phases of the component's lifecycle. We can catch these events and handle them by implementing a few methods in our component. Consider the following method:
componentWillMount
This method is executed when the component is about to be inserted into the DOM. It is invoked once, just before the initial rendering occurs. Usually, this method is used to perform any initialization of the component not involving the DOM, such as initializing values for a component's properties or local variables.
componentWillReceiveProps is the method invoked before rendering when a component receives new values from the parent via props. This method receives the new values as a parameter, and we can access the old values through this.props.
If we try to change the component state during the execution of this method, we will not trigger any additional rendering. Additionally, componentWillReceiveProps() is not to be invoked upon initial rendering.
The shouldComponentUpdate method should return a Boolean that states whether the component should be rendered (true) or not (false). If the method returns false, the next methods will not be invoked, including render().
This has two parameters: nextProps, containing the new values for the props, and nextState, containing the new value of the component's state.
componentWillUpdate is invoked immediately before the render() method, so it is the last opportunity to perform some processing before updating the component.
You cannot use setState() within an implementation of shouldComponentUpdate().
componentDidUpdate is invoked immediately after rendering occurs, and during its execution, we can access the new version of the component in the DOM. The method has two parameters: the previous props and the previous state.
componentDidMount is called after the component is inserted into the DOM, and is invoked just once.
componentWillUnmount is called immediately before the component is removed from the DOM.
You cannot use setState() during the execution of this method.
We can group the component lifecycle events into three main areas:
- Mounting: This props group contains the events related to DOM manipulation: componentWillMount, componentDidMount, and componentWillUnmount
- Updating via props: This group contains the events that are triggered when a component is updated via props passed by its parent, and it includes: componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, and componentDidUpdate
- Updating via setState(): In this group, we find the events triggered when a component is updated via setState(): shouldComponentUpdate, componentWillUpdate, and componentDidUpdate
The following diagram illustrates the event flow and highlights, with different colors, the three areas we just discussed:
