Hello Devs, if you have been following my blogs then you know that I have launched a new series - React for Java developers and this is the 4th article on the series.

Earlier, we have seen state management in React, Redux, and useState hooks example, and in this article, you will learn about how to use lifecycle methods in functional React components.

Lifecycle methods are powerful features provided by React.js in the class-based components. Each of the lifecycle methods executes at a particular time during the lifecycle of a component.

For example, the componentDidMount method executes only when the component is mounted. Similarly, we have other lifecycle methods that execute at a particular time.

Lifecycle methods are very useful but the problem is that they are only available in class components. With the introduction of React hooks, developers are preferring functional components over class components.

So this means we cannot use the lifecycle methods in functional components? No, we can use lifecycle methods in functional components with the help of the useEffect() hook.

In this article, we will understand how we can achieve functionality similar to lifecycle methods in the functional components using react hooks.

By the way, if you are new to the react world then you can also start learning React by exploring these best React Courses and books or you can also go through this React Developer RoadMap to find your path to become a professional React Developer from scratch.

What is useEffect() hook in React.js? Example

The useEffect() in react is used to manage the side effects. It is one of the most commonly used react hooks. The syntax of the useEffect hook is as follows:

useEffect( () => {

}, [])

The useEffect() hook has two arguments - a callback function and a dependency array. The callback function is mandatory while the dependency array is optional.

By using this hook, we can create functionality similar to componentDidMount, componentDidUpdate, and componentWillUnmount. If you want to learn more bout React hooks then you can also check out these free React hooks tutorials and courses.

React.js - componentDidMount Example

The componentDidMount lifecycle method executes when the component is mounted. It means when the component is added to the DOM tree, this method should execute.

The following code is equivalent to the componentDidMount method.

import { useEffect } from "react";

const CompExample = () => {

  useEffect(() => {

    console.log("This code will execute when the component is mounted");

  }, []);

  return <h1> Hello World! </h1>;

};

export default CompExample;

Observe the useEffect() hook.

const CompExample = () => {

  useEffect(() => {

    console.log("This code will execute when the component is mounted");

  }, []);

The empty dependency array means that the hook will execute only once and it will be during the component mounting.

3. React.js componentDidUpdate Example

The componentDidUpdate method executes only when the component updates.

The following code is equivalent to the componentDidUpdate method.

import { useEffect } from "react";

const CompExample = () => {

  useEffect(() => {

    console.log("This code will execute when the component updates");

  });

  return <h1> Hello World! </h1>;

};

export default CompExample;

Now, the useEffect hook will execute only when the component re-renders. The only difference from the previous example is that no dependency array is provided.

useEffect(() => {

    console.log("This code will execute when the component updates");

  });

The componentDidUpdate method also works differently. We can provide an argument to it and it will execute only when the value of that argument is changed. We can do this in the functional component by adding a value(s) in the dependency array.

useEffect(() => {

    console.log("This code will execute when the component updates");

  }, [counter]);

The useEffect() hook will execute only when the value of "counter" is changed.

4. React.js componentWillUnmount Example

The componentWillUnmount() method executes when the component is unmounted, or removed from the DOM tree.

The following code is equivalent to the componentWillUnmount lifecycle method.

import { useEffect } from "react";

const CompExample = () => {

  useEffect(() => {

    return () => {

      console.log("Behavior right before the component is removed from the DOM.");

  }

  }, []);

  return <h1> Hello World! </h1>;

};

export default CompExample;

This time, we have to return a function from the useEffect() hook. This function will execute only when the component is removed from the DOM tree, thus making it similar to the componentWillUnmount lifecycle method.

That's all about how to use lifecycle methods in functional React components. As mentioned earlier, the lifecycle methods are very useful in react application development.

Even though they are not available in functional components, we can achieve the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount using the useEffect() hook.

The useEffect hook will execute only during the component mounting when an empty dependency array is provided. Thus behaving like componentDidMount.

The useEffect hook will execute after every re-render when no dependency is provided, meaning no second argument is given to the hook. Thus behaving like componentDidUpdate. If we want to execute the hook when a particular state is changed, we can add that state to the dependency array. So in such cases, the useEffect hook will execute only when that state is changed.

If a function is returned from the useEffect hook, it will execute when the component is unmounted, thus behaving like componentWillUnmount.

So these are the different ways using which we can use lifecycle methods like functionalities in functional components.

Other React and Web Development Articles and resources You May like to explore

Thanks for reading this article so far. If you like this React tutorial and useEffect hook example, then please share them with your friends and colleagues. If you have any questions or feedback, then please drop a comment.

P. S. - If you are a React beginner and looking for free React courses to better learn React fundamental concepts like components, virtual DOM, etc then I also recommend you to join these free REact.js courses for beginners. It contains free courses from Udmey, Coursera, edX to learn to React online for FREE.

What is React Lifecycle methods and how to use them? Example

What is useEffect() hook in React.js? Example

React.js - componentDidMount Example

3. React.js componentDidUpdate Example

4. React.js componentWillUnmount Example