React Component Life Cycle with Diagram

In this part, we learn about react component life cycle. As we have seen, components are pretty useful and our React application is nothing but just bunch of components, basically, our React application is just collection of components that runs accordingly and build our React app. Every React component has its own life cycle in the application.

Component’s Life Cycle has 3 phases:

Mounting (birth)
Updating (changes)
Unmounting (death)

React Component Life Cycle Diagram

There are some basic and main methods in react component life cycle:

render() method: This render method is used to render the DOM or you can say with the help of render method we can show our application. render should be pure which won’t give you different output for same input simply, this won’t give you side effect. Also, they are immutable functions. It runs during the mounting and updating the component.
componentDidMount : This method runs after render method, as it name suggest, this will show your component did mounted and ready to go. We use this method when we are applying any API, state and props etc.
componentDidUpdate: This method runs if component gets some changes in it like state changes or props changes. componentDidUpdate method runs every time when we change something in application.
componentWillUnmount : This method is called just before destruction or unmounting the component. Basically, it is used to perform cleanups.

Also, there are many other methods are available, but we have to remember these because we usually use them often other methods have less use. We will see later in this article.

Mounting

As we discussed, mounting phase is the initial phase of the component life cycle. There are 4 lifecycle method in mounting phase:

constructor()

constructor is the JavaScript method, it called automatically when we create object of the constructor. Generally, we use it to call super() class in react when we’re creating state or using props. React uses the constructor to pass props to the parent component.

constructor(props){
   super( props );
}

static getDerivedStateFromProps()

getDerivedStateFromProps is introduced in version 16.3. getDerivedStateFromProps is used to update state in response to a change in props without an additional render. This method called just before the render method in mounting or updating the component.

static getDerivedStateFromProps(props, state)

It has two argument props and state. If the state changes, we will get updated props here.

render()

As we discussed earlier, the render method is used to render or to show DOM. Basically, you need to provide elements or things which you want to show on screen.

ReactDOM.render(/*elements to show*/, document.getElementById('root'),callback());

render method have 3 arguments, first one indicated what to show?, second one indicates where to show?, and third one is callback function. whatever you want to show on your application, you can put here as the first argument. document.getElementById indicates where your content will display and callback function return some value if added.

componentDidMount

componentDidMount is method runs after render method, as it name suggest, this will show your component did mounted and ready to go. We use this method when we are applying any API, state and props etc. It will allow you to execute the code when component placed in DOM.

componentDidMount()

Updating

Updating phase triggers if any changes happens like changes in state or props. There are some methods in updating phase:

static getDerivedStateFromProps() and render() methods will be same as we discussed in mounting phase.

shouldComponentUpdate()

The shouldComponentUpdate method allows up to exit react update, which performs re-render again and again, so it won’t affect performance and optimization of application. Generally, we use this method to optimize and responsiveness of the application, but it won’t resolve bugs.

shouldComponentUpdate(nextProps, nextState)

The return value of this method is by default true, if it turns to false then other method won’t work well.

getSnapshotBeforeUpdate()

This getSnapshotBeforeUpdate is invoked before render method, this is used to store the previous values of state. Values returned by getSnapshotBeforeUpdate will be used as a parameter for componentDidUpdate() method, this method always be called with componentDidUpdate method.

getSnapshotBeforeUpdate(prevProps, prevState)

As an argument, it holds previous props values and previous state values.

componentDidUpdate()

This is method runs if component gets some changes in it like state changes or props changes. componentDidUpdate method runs every time when we change something in application.

componentDidUpdate(prevProps, prevState, snapshot)

prevProps: Previous props values passed to the component.
prevState: Previous state values of the component.
snapshot: Value returned by getSnapshotBeforeUpdate() method.

Unmounting

In unmounting phase, we just need to perform cleanups like cancelling network, invalidating timers etc. This phase contains one method which performs cleanups.