What is the component lifecycle in React?

Let’s say that you are a beginner and have just started learning React. After completing the basics of React there are few concepts that you need to know. So, in this article, we will see what is the component lifecycle in React. 

What is the component lifecycle in React?

Component lifecycle is one of the most important concepts in React. The component lifecycle is exactly what it sounds like. To clarify, it details the life of a component. The components are born, perform few tasks during their time, and then die. But, the life stages of a component are a little different. Here’s what it looks like:

Let’s look at the various components in this image. Each horizontal rectangle represents a lifecycle method (except for “React updates DOM and refs”). The columns represent different stages in the component’s life. A component can only be in one stage at a time. It starts with mounting and moves on to updating. It stays updating until it gets removed from the virtual DOM. Then it goes into the unmounting phase and gets removed from the DOM.

The lifecycle methods allow developers to run code at specific points in the component’s life or in response to changes in the component’s life. Let’s go through each stage of the component and the method associated with it.

Mounting

Since class-based components are classes, the first method that runs is the constructor method. Typically, the constructor is where you would initialize the component state. Next, the component runs the getDedrivedStatesFromProps. You can skip this step as it has limited use.

Now we come to the render method which returns your JSX. Now React “mounts” onto the DOM. Lastly, the componentDidMount method runs. Here is where you would do any asynchronous calls to databases or directly manipulate the DOM if you need. Just like that, our component is born.

Updating

This phase is triggered every time state or props change. Like in mounting, getDerivedStateFromProps is called (but no constructor this time!). After that shouldComponentUpdate runs. Here you can compare old props/state with the new set of props/state. You can determine if your component should re-render or not by returning true or false.

This can make your web app more efficient by cutting down on extra re-renders. If shouldComponentUpdate returns false, this update cycle ends. If not, React re-renders and getSnapshotBeforeUpdate runs afterward. This method has limited use as well. React then runs componentDidUpdate. Like componentDidMount, you can use it to make any async calls or manipulate the DOM.

Unmounting

Our component performed various important tasks. But all good things come to an end. The unmounting phase is the last stage of the component lifecycle. When you remove a component from the DOM, React runs componentWillUnmount right before it gets removed. React developers should use this method to clean up any open connections such as WebSockets or intervals.

 

Commonly Used Lifecycle Methods

 

render()

The render() method is the only required method in a class component. The render() function should be pure. To clarify, it does not modify the component state. Also, it returns the same result each time it’s invoked, and it does not directly interact with the browser. If you need to interact with the browser, perform your work in componentDidMount(). You can also use other lifecycle methods instead. Keeping render() pure makes components easier to think about.

constructor()

The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs. Constructor is the only place where you should assign this.state directly. In all other methods, you will need to use this.setState() instead. Avoid introducing any side-effects or subscriptions in the constructor. For those use cases, you can use componentDidMount() instead.

componentDidMount()

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount().

 

Conclusion

So, in this article, we have been through what is the component lifecycle in React. You can also comment and let us know which framework you use for UI development. Feel free to comment with your suggestions and feedback. At BOSC Tech Labs, we have a team of highly experienced React JS developers who can assist you in developing your customized web app. So contact us to hire experienced React JS developers.