Common React Mistake:  Use useEffect without Dependency Array

A common mistake in React development is misusing the useEffect hook without providing a dependency array. While this might seem perfectly fine at first glance, it can lead to performance issues.

const ExampleApp = () => {

    useEffect(() => {
        fetch('some-fake-url').then((response) => {
            initializeData(response.payload)
        })
    }); // No dependency array
    
    return (
        <div>
            /* Some elements */
        </div>
    );
}

Explanation

While using useEffect() without dependencies doesn’t cause errors, but it’s crucial to know that it makes the effect run after every render. This means it could fetch data or perform actions unnecessarily each time the component updates, , which can slow down your app and waste resources. Always consider if your effect really needs to run after every render, and if not, provide the appropriate dependencies to make it more efficient.

In fact, using useEffect() without dependencies is equivalent to not using useEffect() at all. This is identical to the code below:

const ExampleApp = () => {

    // No useEffect hook
    fetch('some-fake-url').then((response) => {
        initializeData(response.payload)
    })
    
    return (
        <div>
            /* Some elements */
        </div>
    );
}

The Correct Use

The objective of the code example is to fetch and initialize data upon the initial loading of the application. Thus, resolving the issue can be as simple as adding an empty dependency array to the useEffect hook. As demonstrated in the code below:

const ExampleApp = () => {

    useEffect(() => {
        fetch('some-fake-url').then((response) => {
            initializeData(response.payload)
        })
    }, []); // With an empty dependencies array, useEffect hook only runs only.
    
    return (
        <div>
            /* Some elements */
        </div>
    );
}

Forgetting Empty Dependency Array in useEffect

Forgetting to include an empty dependency array in useEffect hooks is a common oversight among developers, including myself. Here are some easy tips to help prevent it:

Use Linters: Set up your linting tool (like ESLint) to enforce rules that mandate specifying dependencies for useEffect. This can catch the mistake as you write your code.

Automated Tests: Create automated tests to verify that effects are called only when expected. This can uncover instances where effects run more often than intended due to missing dependencies.