6 most used React Component LifeCycle methods

21 April 2021

ReactJs is the javascript library for developing UI components. It was developed by facebook. It is one of the most popular javascript library.

React js can be used in web, mobile applications. It is basically a single page application that changes the web pages by using components without reloading the page. The main reason for react becoming so popular and trending is its lightweight and injectability. We can use react with any stack.

Components, state and props in react

Every react application has mainly three aspects: components, states and props.

Every react application can be broken down into the individual components. Components are the center part of any react application. Components are nothing more than a piece of code or we can say chunks, bunch of code, that comes together to complete a react application. At basic, every react application must have a root component(default name as app). And all other user defined components come under it. Thus, we can say that every react application is the collection of component hierarchy. While rendering, we can pass some values to the component which we called as props for the component.

Let’s look at an example to understand the react component hierarchy. If we want to create a react application like facebook, here is the component hierarchy look like:

Initially, we will have a root component(app). Under that, for an application file facebook, we can have components for navigation Bar, profiles, component to see trendings, news feeds or more like these. Inside feeds we can have a feature ‘Like’ to like or comment on some feeds.

State:

State is nothing more than a dynamic data that can change anytime. We can have our data stored in states for our component.

Component LifeCycle methods

Each component has different lifecycle methods that get triggered when some state changes or props changes. We can override these methods to run code at particular times as needed.

Let’s look at the frequently used component lifecycle methods:

componentWillMount:

When we create a component and when it gets loaded in the running application, the very first method which gets called is componentWillMount. This method gets ignored if not added in the code. So, we can say that, it’s a protected method. If we have it in the code, then it will get executed immediately before the initial rendering(before render method).

componentDidMount:

The next method which gets executed by react is componentDidMount. This method runs immediately after the initial rendering(just after the render method). In this method, we can write statements to fetch the data from external API calls or some other related operations.

componentWillReceiveProps:

This lifecycle method is executed whenever the component receives new props. So, whenever a component’s props or state changes, componentWillReceiveProps gets executed.

shouldComponentUpdate:

This method gets executed before rerendering. As its name indicates, it is more likely asking a question to the component for re-rendering it or not. Whenever a component receives new props and states, it asks whether to re-render components for that received change or not. We can return false from this method to prevent it from re-rendering. We can write some logic in this method based on the new state and prop change to check if a component is needed to re-render or not.

componentWillUpdate:

This lifecycle method runs after shouldComponentUpdate returns true. This method is called before re-rendering, but after the component receives a new state or props and after shouldComponentUpdate.

componentDidUpdate:

This lifecycle method is useful to perform some actions when state or props changes. This method takes two arguments: previous states and previous props.