React Component Lifecycle Methods

Lets first talk about Component it is the reusable JSX code that helps to divide the UI into many small units. There are two types of component in react :-

1. Class components- are the components that extends React.Component .Now you must be thinking whats ism React.Component?It is a base class provided by the react library using which class component can utilize react lifecycle methods i.e render,componentDidMount,componentDidupdate,componentWillUnMount.Using Lifecycle methods component can manage its state and props.

2. Functional components- are the components that are stateless and no ‘this.state’ keyword used to manage state . Functional component can also be made stateful using React hooks. i.e UseState,UseEffect.

Do look at the above pictures carefully for difference between class and functional component.

Now lets talk about what are lifecycle methods?What is component lifecycle?It is the stages in which component life is divided.It is divided into three stages:-

1. Mounting
2. Updating
3. UnMounting

In Mounting stage,component is render and is been mounted in the DOM.So the main point is, which of the lifecycle methods are used?when react renders the component ,the constructor method is invoked beacause it contains all the state variable and props infromation.After which the component’s render method is invoked which helps to describe what should be displayed on the screen and also mounts the component in DOM.Finally , componentDidMount method is invoked which is mostly used to intialise task like event listeners, making API request which may change the state of the component.

Get Aditay Yadav’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In Updating stage,First of all when does the updating stage begin?This stage begin when the props or state of the component is changed and the component needes to update in DOM. Firstly, the method named static getDerivedStateFromProps is invoked which returns the object which has the updated version of state. And then invokes shouldComponentUpdate method which gives a boolean return value by defualt it gives true that means the component should re-render because the state is updated.After that render method is invoked to updated the DOM and than getSnapShotBeforeUpdate method is invoked to keep the track of previous version of DOM just before the update is reflected on the DOM.At last,componentDidUpdate method is invoked and it is used for making API request or for as a clean-up function.

In Unmounting stage,the component is removed from the DOM and the method componentWillUnmount is invoked which is used for clean-up functions, or garbage collection ,clearning event listeners like timers,setIntervals.

Now you must be thinking these are the methods that are invoked during the lifecycle of class components but what happens in case of Functional component ?

In mounting phase ,for state managment no constructor metod is invoked instead React UseState hook is used beacause when react render funcitonal component it first sees useState hooks to intialise all the state variables.And than the JSX of the component is rendered .After which the useEffect hook with an empty dependency array is invoked which means this method will be invoked only once intially ,which is ideal to make API request ,intialise event listeners isn’t this hook has the same functionality as componentDidMount method.

In Updating phase,all the state changes are managed by useState ,but if you have to make any API request or perform any task that should be performed during the updating phase of component than all these task should be done inside useEffect hook without an dependency array this means that useEffect hook will be invoked everytime the component is rendered .This useEffect hook acts as componentDidMount method.

In Unmounting phase ,where the component is removed from the DOM all the event listeners are removed or also all the ongoing API request are canceled.In class component all these operations are performed in the componentWillUnmount method.But in Functional component all these operations are bind with the return value.

Note:-Do checkout this website for more clear understanding of lifecycle methods https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Facts:-

1. Above we have discussed about the a lifecycle method name static getDerivedStateFromProps this method is invoked on every render of the component .It has the ability to get the updated state ,where the state change depends on the change in props.
2. We have also discussed about the method shouldComponentUpdate this method can be used to optimise the react app .It helps react to identify if the components needs to re-render by comparing its previous state and props from the current received state and props.
3. React also had a method to catch error that occur during the rendering of component i.e componentDidCatch method is used to catch error.It takes two parameter error and information about error.