Custom Hook in React to solve useEffect double invocation

Functional components are taking center stage in React development, thanks partly to the streamlined useEffect Hook. It handles tasks like data fetching and local storage much more elegantly than lifecycle methods in class components. But there’s a hidden shortcoming. useEffect can fire twice unexpectedly, potentially harming your app’s performance. This blog post explores this challenge and provides clear solutions for effectively managing side effects using useEffect in React applications.

What is useEffect?

The useEffect Hook lets you do extra tasks in functional components clearly and predictably. It’s like a replacement for the old lifecycle methods, but it puts all the extra task codes into one place, making the code easier to read and maintain.

However, there’s a little hiccup with useEffect. Sometimes, when we use it, it runs twice when the component first shows up, which is a bit unexpected.

Let’s explore why that happens and how to fix useEffect’s double invocation.

Example of useEffect in React

Consider the following example of using useEffect in a React functional component:

import React, { useState, useEffect } from "react";

const MyComponent = () => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch("https://fakestoreapi.com/products/1");
                const jsonData = await response.json();
                setData(jsonData);
                setLoading(false);
            } catch (error) {
                console.error("Error fetching data:", error);
                setLoading(false);
            }
        };
        fetchData();
    }, []);
    return (
        <div>
            {loading ? (
                <p>Loading...</p>
            ) : (
                <div>
                    {data ? (
                        <div>
                            <h2>Data from API:</h2>
                            <pre>{JSON.stringify(data, null, 2)}</pre>
                        </div>
                    ) : (
                        <p>No data available</p>
                    )}
                </div>
            )}
        </div>
    );
};
export default MyComponent;

In the example above, the user is trying to fetch data from an API. But if you check the network tab in the browser’s developer tools, you’ll notice that the API call happens twice. This duplication can slow down data loading, affecting the user experience.

By figuring out why it happens and learning how to solve it, you can ensure that the app only performs extra tasks when necessary. This will speed up loading times and give users a smoother experience.

Why does useEffect get called twice in React?

The first time useEffect runs is when the component appears on the screen. It’s like doing tasks right after you see something new. This is important because it lets you get data or set up special features as soon as the component is ready.

The second time useEffect runs is when the component changes. This can happen if something about the component or its surroundings changes, like when its props or state changes or when a parent component updates. By default, useEffect runs every time the component changes, but you can control this by limiting it to run only when dependencies change.

Sometimes, it might seem like useEffect runs twice, especially when using React’s Strict Mode, which helps catch problems during development by running components twice. Strict Mode ensures everything is working correctly by running components twice.

The solution: use the useMountEffect custom Hook

The useMountEffect custom Hook is a helper function designed to address an everyday use case for the useEffect Hook in React: (read more..)