Various methods in react lifecycle

Tags: reactlifecycle
Published: 2021-07-01 07:10:00

<p><span style="font-weight: 400;">The methods in React lifecycle can be considered as the series of events that take place right from the origin of a <a href="https://dev.to/teo_garcia/6-ways-to-write-a-react-component-ts-included-2k42">React component</a> 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.&nbsp; The death of your component is highlighted by the unmounting phase.</span></p>
<p><span style="font-weight: 400;"><a href="https://dev.to/t/react">React</a> presents various methods that inform us whenever a certain stage of this process takes place. Such methods are known as the component&rsquo;s lifecycle methods. Moreover, they are called upon in a predictable order. When you undergo </span><a href="https://www.dotnettricks.com/training/masters-program/reactjs-acertification-training"><strong>Reactjs certification</strong></a><span style="font-weight: 400;">, 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&rsquo;s first understand the need for a lifecycle for React components:</span></p>
<h2><strong>Dependency of components on a lifecycle:</strong></h2>
<p><span style="font-weight: 400;">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.&nbsp;</span></p>
<p><span style="font-weight: 400;">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&rsquo;s unmounted from the DOM.</span></p>
<p><span style="font-weight: 400;">When you go through the React</span><strong> tutorial</strong><span style="font-weight: 400;">, you can know why React components need a lifecycle. The details in the corresponding </span><a href="https://www.dotnettricks.com/paths/become-react-developer"><strong>React learning path</strong></a><span style="font-weight: 400;"> highlights the need for a lifecycle for the React components.</span></p>
<p>&nbsp;</p>
<p><strong>Frequently used React lifecycle methods:</strong></p>
<p>&nbsp;</p>
<p><strong>render:</strong></p>
<p><span style="font-weight: 400;">The render() method is the commonly used lifecycle method.&nbsp; This method can be found in all React classes. The reason is that render()&nbsp;is the only vital method in a class component within React.</span></p>
<p><span style="font-weight: 400;">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.&nbsp; 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 </span><strong>Learn Reactjs Step By Step</strong><span style="font-weight: 400;">, you will come to know the importance of this method.&nbsp;</span></p>
<p>&nbsp;</p>
<h3><strong>componentDidMount():</strong></h3>
<p><span style="font-weight: 400;">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.</span></p>
<p><span style="font-weight: 400;">Contrasting the render()&nbsp;method,&nbsp;the componentDidMount()</span><em><span style="font-weight: 400;">&nbsp;</span></em><span style="font-weight: 400;">permits you to use setState()</span><em><span style="font-weight: 400;">. </span></em><span style="font-weight: 400;">When you call the&nbsp;setState() method, it updates</span><em><span style="font-weight: 400;">&nbsp;</span></em><span style="font-weight: 400;">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.</span></p>
<p><span style="font-weight: 400;">It is possible to modify the component state inside the componentDidMount() but you should be careful.</span></p>
<p>&nbsp;</p>
<h3><strong>componentDidUpdate():</strong></h3>
<p><span style="font-weight: 400;">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.</span></p>
<p><span style="font-weight: 400;">In this lifecycle method, you can call setState()</span><em><span style="font-weight: 400;">. </span></em><span style="font-weight: 400;">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.</span></p>
<p>&nbsp;</p>
<h3><strong>componentWillUnmount():</strong></h3>
<p><span style="font-weight: 400;">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.</span></p>
<p><span style="font-weight: 400;">It is not allowed to update the component state in&nbsp;componentWillUnmount&nbsp;lifecycle. Keep in mind that this component is never re-rendered and therefore, we could not call setState()</span> <span style="font-weight: 400;">throughout this lifecycle method.</span></p>
<p><span style="font-weight: 400;">The frequently used cleanup activities in this method are canceling API calls, clearing timers, or clearing any caches within the storage.</span></p>
<p><br /><br /></p>
<h2><strong>Some other React lifecycle methods:</strong></h2>
<h2><span style="font-weight: 400;">The methods described in this section are not frequently used. Let&rsquo;s get into the details of such methods:</span></h2>
<h3><strong>shouldComponentUpdate():</strong></h3>
<p><span style="font-weight: 400;">This lifecycle method can prove useful when you don&rsquo;t want to render your state or prop changes through React. Whenever setState() is invoked, the component re-renders by default. The&nbsp;shouldComponentUpdate() method is useful to make sure React knows if a component is not influenced by the prop and state changes.</span></p>
<p><span style="font-weight: 400;">Don&rsquo;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 </span><strong>React Interview Questions and Answers</strong><span style="font-weight: 400;">.</span></p>
<p>&nbsp;</p>
<h3><strong>static getDerivedStateFromProps():</strong></h3>
<p><span style="font-weight: 400;">This method is recently introduced by the React team. It is considered a safer option than the earlier lifecycle method known as&nbsp;componentWillReceiveProps().</span> <span style="font-weight: 400;">It is invoked just before calling the render() method.</span></p>
<p><span style="font-weight: 400;">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</span><em><span style="font-weight: 400;">. </span></em><span style="font-weight: 400;">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.</span></p>
<p>&nbsp;</p>
<h3><strong>getSnapshotBeforeUpdate():</strong></h3>
<p><span style="font-weight: 400;">getSnapshotBeforeUpdate() is also a latest lifecycle method recently introduced by React.&nbsp;It is considered as a safer option than the previous lifecycle method i.e.&nbsp;componentWillUpdate(). It is called immediately before the DOM gets updated. The value returned from getSnapshotBeforeUpdate()&nbsp;gets passed over to&nbsp;componentDidUpdate().</span></p>
<p><span style="font-weight: 400;">One of the best examples where getSnapshotBeforeUpdate</span> <span style="font-weight: 400;">can be used is resizing the window when performing an async rendering.</span></p>
<p>&nbsp;</p>