React lifecycle methods are the sequence of actions that occur between the birth and death of a React component Every React component passes through a set of events called a lifecycle. I like to imagine them going through a birth, development, and death cycle.
Mounting : Creation Phase of Component updating : Updating phase of Component unMounting : Death of Component Common React Lifecycle Methods render() The render() function is the most commonly used method in the lifecycle. It can be found in all React classes. This is due to the fact that with React, the only needed method within a class component is rendered ().
It manages the rendering of your component to the user interface, as the name implies. It happens when you’re installing and updating your component.
componentDidMount() The next React lifecycle method componentDidMount() comes into action now that your component has been mounted and is ready.
When the component is mounted and ready, componentDidMount() is invoked. If you need to load data from a remote endpoint, here is a nice place to start making API calls.
componentDidMount(), unlike render(), allows setState to be used (). SetState() will change the state and cause a new rendering, but it will happen before the browser updates the UI. This prevents the user from seeing any UI updates as a result of the duplicate rendering.
componentDidUpdate() As soon as the update occurs, this lifecycle procedure is called. The componentDidUpdate() function is most commonly used to update the DOM in response to prop or state changes.
In this lifecycle, you can call setState(), but you’ll need to wrap it in a condition to check for state or prop changes from the previous state. An infinite loop might occur if setState() is used incorrectly.
componentWillUnmount() This lifecycle method is invoked shortly before the component is unmounted and destroyed, as the name implies. If you need to undertake any cleanup work, this is the place to do it.
React Component Lifecycle Diagram The diagram below, taken from the official React documentation, illustrates the various React lifecycle methods and when they are used.
React Component Life Cycle Diagram Recap React component lifecycle has three categories – Mounting, Updating and Unmounting The render() is the most used lifecycle method. It is a pure function. You cannot set state in render() The componentDidMount() happens as soon as your component is mounted. You can set state here but with caution. The componentDidUpdate() happens as soon as the updating happens. You can set state here but with caution. The componentWillUnmount() happens just before the component unmounts and is destroyed. This is a good place to cleanup all the data. You cannot set state here. BONUS ONE😉 The shouldComponentUpdate() can be used rarely. It can be called if you need to tell React not to re-render for a certain state or prop change. This needs to be used with caution only for certain performance optimizations. If you like this article, please share it with your friends ( Who only want to know about this topic 😂 )
