ReactJS useEffect Hook

The useEffect Hook is used in React functional components to perform side effects after rendering. Side effects include tasks such as fetching data from APIs, updating the DOM, setting timers, and handling event listeners.

In React class components, lifecycle methods such as componentDidMount(), componentDidUpdate(), and componentWillUnmount() were used to handle these operations. The useEffect Hook provides a simpler way to manage the same functionality inside functional components.

In this chapter, you will learn how to use the useEffect Hook in React, control when effects run, and work with different examples.

What is useEffect Hook?

The useEffect Hook is a built-in Hook in React that allows functional components to perform side effects. It runs after the component renders and can also run again when specific data changes.

By default, useEffect runs after every render. However, its behavior can be controlled using a dependency array. This makes it useful for tasks such as:

• Fetching data from APIs
• Updating page titles
• Working with timers
• Handling subscriptions
• Managing event listeners

The useEffect Hook makes React code easier to manage and reduces the need for class-based lifecycle methods.

Importing the 'useEffect' Hook

To use the useEffect hook in your React component, you need to import it from the 'react' library:

This import statement makes the useEffect function available for use within your component.

Structure of the 'useEffect' Hook

The useEffect hook accepts two arguments, with the second argument being optional. Its syntax is as follows:

The useEffect function takes a function (callback) as its first argument. This function contains the code that will be executed as the side effect. The second argument, <DEPENDENCY>, is an array that allows you to specify dependencies for the effect. These dependencies control when the effect runs.

Controlling Side Effects with 'useEffect'

The useEffect hook provides various ways to control when the effect runs. These control mechanisms are essential for fine-tuning the behavior of your component. Let's explore these options:

1. Running on Every Render: If you don't specify any dependencies, the effect runs on every render. This is useful when you need to execute code each time the component renders.

Here's an example:

2.Running Only Once:

To ensure that the effect runs only once, typically during the initial render, you can pass an empty dependency array.

3.Running on Dependency Change: By specifying dependencies in the array, you can make the effect run whenever one of these dependencies changes. This is particularly useful when you want to react to changes in specific props or state variables.

Mimicking Lifecycle Methods Using useEffect

The useEffect hook can be used to mimic the behavior of various class-based component lifecycle methods in functional components.

1. Mimicking componentDidMount

To mimic the behavior of componentDidMount, you can use an empty dependency array. This ensures that the effect runs only once when the component mounts.

2. Mimicking componentDidUpdate

To mimic the behavior of componentDidUpdate, you can specify dependencies in the array. The effect will run whenever any of the dependencies change.

In this example, the effect runs whenever the values variable changes, triggering a re-render.

3. Mimicking componentWillUnmount

To mimic the behavior of componentWillUnmount, you can return a cleanup function inside the effect. This function will be called when the component is unmounted.

This cleanup function allows you to perform cleanup tasks before the component is removed from the DOM. Now, let's dive into examples that illustrate these concepts.

Example 1: Running on Every Render

Suppose you have a counter component, and you want to update the document title to show the current count on every render. Here's how you can achieve this using the useEffect hook:

Output:

In this example, the useEffect hook without dependencies updates the document title with the current count on every render.

Example 2: Running Only Once

Let's say you need to initialize some data when the component is mounted, and you don't want the effect to run on subsequent renders. You can use an empty dependency array for this purpose. Here's an example:

Output:

In this example, the effect runs only once during the initial render to initialize the data.

Example 3: Running on Dependency Change

Suppose you want to fetch and display data based on a selected category. You can use the useEffect hook with a dependency array to update the data when the category changes. Here's an example:

Output:

In this example, the useEffect hook runs when selectedCategory changes, fetching and displaying data for the updated category.

In the next section, we will explore more complex scenarios of using the useEffect hook to fetch data, handle DOM manipulation, and manage subscriptions or event listeners.

Using useEffect to Fetch Data

One of the most common use cases for the useEffect hook is fetching data from an API. Let's delve into how to use useEffect to fetch data and update a component's state.

Fetching Data with useEffect

Suppose you have a component that needs to fetch data from an API when it mounts. You can use the useEffect hook with an empty dependency array to ensure the fetch operation occurs only once, similar to componentDidMount in class-based components. Here's how you can do it:

Output:

In this example, the DataFetchingComponent fetches data from an API when it mounts. The fetched data is stored in the component's state, and it is used to render a list of items. Using the useEffect hook with an empty dependency array ensures that the data is fetched once when the component is mounted.

Handling DOM Manipulation with useEffect

Another common use case for the useEffect hook is updating and manipulating the DOM. Let's look at an example where we use useEffect to change the background color of a component after a delay.

Output:

In this example, the BackgroundColorChange component initially has a white background. We use the useEffect hook with an empty dependency array to change the background color to "lightblue" after a delay of 2 seconds. Additionally, we clean up the timer when the component is unmounted to prevent memory leaks.

Subscriptions and Event Listeners with useEffect

You can also use the useEffect hook to set up and manage subscriptions or event listeners. Here's an example of how to subscribe to a real-time data source.

Output:

In this example, the RealTimeDataComponent sets up a subscription to receive real-time data. The useEffect hook with an empty dependency array ensures that the subscription is established once when the component mounts. When the component unmounts, it cleans up the subscription to prevent memory leaks.