Lifecycle methods using Hooks in React

While developing applications in React, the most essential part is the use of Component Lifecycle methods. If you have worked with class-based components, we would have used those methods for updating the DOM, fetching data using an API endpoint, etc.

React Component Lifecycle -

Basically there are 3 phases of the React component lifecycle -

• Mounting - Inserting the component into the DOM
• Updating - Updating the component in the DOM
• Unmounting - Detaching the component out of DOM

All the 3 phases have there respective methods which make it easy to work with the components and perform certain operations. In Class-Based Components, we can directly access those methods since we extend React.Component class.

Mounting -

This is the first phase of the lifecycle. In this phase, the component is created and inserted into the DOM. In this phase, we have componentDidMount() method. This method is called just after the component is mounted. In this method, we can use setState() to modify and set the state -

Updating -

This is the second phase and it happens after the component is mounted and rendered. When the props and states are changed, the component is updated. Here we have componentDidUpdate().This method also allows us to modify and set state but make sure to wrap it with some condition to avoid the infinite loop -

Unmounting -

This is the third phase and it happens just before the component is removed or detached from the DOM. Here we have the method called componentWillUnmount(). This method is called just before the component is unmounted -

So how to use these methods in a Functional component? To perform similar actions, useEffect hook is introduced.

The useEffect Hook -

Hooks are the new addition in React 16.8. Hooks help us to use other features and state without actually writing a class.

The useEffect hook takes 2 parameters - a callback function and an array also called effect dependency array. The callback function is called every time the component is mounted and unmounted. If we want to restrict this, we have the dependency array in which we pass dependencies and the Hook will only run if any of those dependencies changes.

useEffect as componentDidMount() -

We can easily make useEffect Hook work similarly as the componentDidMount() method by just passing the callback function inside the Hook -

Pretty easy, right?

useEffect as componentDidUpdate() -

If we want to make useEffect Hook work like componentDidUpdate(), we can easily do it by just passing the second parameter, i.e., dependency array. When we pass the dependencies, the useEffect Hook will only run when the values changes. Let's see how -

Here, we have passed selectedValue inside the dependency array. Now, useEffect Hook will only run if the value of selectedValue changes. Same as the above but with a little change.

useEffect as componentWillUnmount() -

As we already know that just before the component is unmounted from the DOM, componentWillUnmount() method is called. To make useEffect Hook work like this method, we need to return a cleanup function inside the Hook -

If we want to run the cleanup function only when the component is unmounted from the DOM, we need to set the dependency array as empty. If we pass dependencies in the array, the cleanup function will run every time the value of dependencies changes.

All the cases combined -

So, we can now easily perform side effects using Hooks. We have seen that it is very simple to run our code on specific phases like mounting, unmounting, etc. with the help of useEffect Hook.

Conclusion -

We have learned about the phases of the component lifecycle in React and how to use lifecycle methods in a function-based component using useEffect Hook.