Various methods in react lifecycle

The methods in React lifecycle can be considered as the series of events that take place right from the origin of a React component till its death. Each component in React passes through a lifecycle of events. You can consider them as passing through a cycle of birth, growth, and death. The mounting phase denotes the birth of your React component. The update phase highlights the growth of your component.  The death of your component is highlighted by the unmounting phase.

React presents various methods that inform us whenever a certain stage of this process takes place. Such methods are known as the component’s lifecycle methods. Moreover, they are called upon in a predictable order. When you undergo Reactjs certification, you will be familiar with the various methods covered in the React lifecycle. Before getting into the details of the diverse methods in React lifecycle, let’s first understand the need for a lifecycle for React components:

Dependency of components on a lifecycle:

React components pass through a lifecycle irrespective of your code is familiar with it or not. Rendering is known to be one of the lifecycle events within a React component. For instance, there are lifecycle events specially dedicated for whenever the component is ready to be mounted in the DOM. Also, there are events after the component gets mounted to the DOM and when the component is updated, etc. 

Since lifecycle events are another moving part, you need to keep them to a minimum. Certain components must respond to the lifecycle events to carry out initialization, deliver heuristics, or clearout after the component when it’s unmounted from the DOM.

When you go through the React tutorial, you can know why React components need a lifecycle. The details in the corresponding React learning path highlights the need for a lifecycle for the React components.

Frequently used React lifecycle methods:

render:

The render() method is the commonly used lifecycle method.  This method can be found in all React classes. The reason is that render() is the only vital method in a class component within React.

Implied from the name, it manages the rendering of your component to the UI. Moreover, it takes place during the mounting and updating phase of your component. Keep in mind that a render() method needs to be pure, without side effects. React needs that your render() method is pure. Pure functions always return the same output whenever the same inputs are given. It suggests that you could not set State() inside a render() method.  Also, keep in mind that you cannot change the component state inside the render(). When you keep your render() method pure and simple, without state updates, your app becomes maintainable. When you Learn Reactjs Step By Step, you will come to know the importance of this method. 

componentDidMount():

After the render() method is executed, your component has now been mounted and ready. Now the another React lifecycle method i.e. componentDidMount() proves to be useful. This method is called the moment the component is mounted and is ready. At this moment, it is good to make API calls if you want to load data from a remote endpoint.

Contrasting the render() method, the componentDidMount() permits you to use setState(). When you call the setState() method, it updates state and leads to another rendering. However, it will take place before the browser updates the UI. The reason is it makes sure the user would not observe any UI updates having the double rendering.

It is possible to modify the component state inside the componentDidMount() but you should be careful.

componentDidUpdate():

This lifecycle method is called upon the moment the updating happens. Typically, this method is useful for updating the DOM in reply to prop or state modifications.

In this lifecycle method, you can call setState(). But remember that you have to wrap it inside a condition to analyze for state or prop modifications from the previous state. The inappropriate usage of setState() can create an infinite loop. It is possible to update the component state in the componentDidUpdate() method.

componentWillUnmount():

Suggested from the name itself, this lifecycle method is invoked just before the component is unmounted and ruined. This can be the right spot if there are any cleanup actions which you will have to do.

It is not allowed to update the component state in componentWillUnmount lifecycle. Keep in mind that this component is never re-rendered and therefore, we could not call setState() throughout this lifecycle method.

The frequently used cleanup activities in this method are canceling API calls, clearing timers, or clearing any caches within the storage.

Some other React lifecycle methods:

The methods described in this section are not frequently used. Let’s get into the details of such methods:

shouldComponentUpdate():

This lifecycle method can prove useful when you don’t want to render your state or prop changes through React. Whenever setState() is invoked, the component re-renders by default. The shouldComponentUpdate() method is useful to make sure React knows if a component is not influenced by the prop and state changes.

Don’t forget that this is an infrequently used lifecycle method. It exists merely for some performance optimizations. It is not allowed to update component state in shouldComponentUpdate() lifecycle. Many training courses on React incorporate learning on such infrequently used React lifecycle methods. This is because it may help you to succeed in React Interview Questions and Answers.

static getDerivedStateFromProps():

This method is recently introduced by the React team. It is considered a safer option than the earlier lifecycle method known as componentWillReceiveProps(). It is invoked just before calling the render() method.

When getDerivedStateFromProps() is executed, it returns an object to update the state according to prop changes. If there is no modification to state, it returns a null. Keep in mind that this method is applicable only for rare use cases in which the state relies on modifications in props in a React component. With every render() execution, this lifecycle method is executed.

getSnapshotBeforeUpdate():

getSnapshotBeforeUpdate() is also a latest lifecycle method recently introduced by React. It is considered as a safer option than the previous lifecycle method i.e. componentWillUpdate(). It is called immediately before the DOM gets updated. The value returned from getSnapshotBeforeUpdate() gets passed over to componentDidUpdate().

One of the best examples where getSnapshotBeforeUpdate can be used is resizing the window when performing an async rendering.