Component Lifecycle in ReactJS

Everything you see in a React application is a component or part of a component. In React, components are designed to follow the natural cycle of life. They are born (creation), grow (updating), and finally, die (deletion). This is called the component lifecycle.

For each phase of a component’s life, React provides access to certain built-in events/methods called lifecycle hooks or lifecycle methods. These methods give you opportunities to control and manipulate how a component reacts to changes in the application.

Let’s have a look at each phase in a component lifecycle:

Pre-mounting (Initialization)

A component is a JS class. Like any class, it has a constructor function that is called to set things up. It usually sets up state and props.

** Mounting **
Once initialization has completed, an instance of the component is created and mounted onto the DOM. Using its initial state, the component renders onto the page for the first time. At this phase, we have two lifecycle methods available to use: componentWillMount, and componentDidMount.
After the constructor is called, componentWillMount is called just before render and is called once in a lifecycle. This method is not used much - even the React documentation mentions that anything you could do here is better done in either the constructor or componentDidMount methods.

If you try to make any API calls or data changes using this.setState in this method, nothing can happen (no updating) in the DOM because componentWillMount is called before the render method.

componentDidMount is called just after the render method. Like componentWillMount, it is called once in a lifecycle. Because the render method has already been called, we can access the DOM. You would use this method to set up any long-running processes or asynchronous processes such as fetching and updating data.

Updating
Whenever a component’s state and props change from within the React component or through the API or backend, the component is updated by being re-rendered on the page. State and props change depending on a user’s interaction with the component or if new data is passed in.
The lifecycle methods that are available in this phase are:

1. componentWillReceiveProps: This method is invoked when there is a change to the props that the parent is passing into the component.

2. shouldComponentUpdate: This method is invoked just before the component is about to re-render. It determines whether the component should be updated or not. By default, it returns true. You can compare the old and new props and state by using the next props and next state arguments and prevent unnecessary re-renders if the changes in props and/or state don’t affect what’s being shown to the user.

3. component will update: This method is called just after shouldComponentUpdate has finished and just before the new component gets rendered. Some examples of uses for this method are if you have any calculations you need to perform before re-rendering and after props and/or state updates, or if you need to update integrations with third-party libraries. Like shouldComponentUpdate, it also receives arguments like next props and next state.

4. componentDidUpdate: This method is called just after the re-rendering of the component. You will have access to the previous props and state with prevProp and private as well as the current ones, and you can use this method to update any third-party libraries if they happen to need an update due to the re-render.

Unmounting
This is the last phase in the component’s lifecycle. At the unmounting stage, the component gets deleted and removed from the page. The only lifecycle method at this stage is component willUnmount, which is called just before the component gets deleted. It is used to clear anything that was set up in componentDidMount. For example, removing any timers defined in componentDidMount.

Deprecating Lifecycle Hooks
The React team has decided to deprecate some of the lifecycle methods with React 17. A recent blog post from the ReactJS team reveals the future of component lifecycle methods.

The 3 lifecycle methodscomponentWillMount,
componentWillRecieveProps, component will update will soon be deprecated. However, they are not fully going away as you'll be able to use them with UNSAFE_componentWillMount, UNSAFE_componentWillRecieveProps, UNSAFE_componentWillUpdate.

Why are they unsafe?
The original lifecycle model was not intended for some of the upcoming features like asynchronous rendering. With the introduction of asynchronous rendering, some of these lifecycle methods will be unsafe if used.
For example, asynchronous rendering will cause componentWillMount to trigger multiple rendering of your component tree. This makes it unsafe.

Summary
Understanding the component lifecycle will enable you to perform certain actions when a component is created, updated or destroyed. Not every method needs to be used in every component you build. The benefit of using them is the opportunity to decide if a component should be updated in the first place and to react to props or state changes accordingly.
Thanks for reading!