useEffect Fired Twice and It Found a Real Bug

Introduction

When working with React, especially in versions 18 and above, you may encounter an issue where useEffect is called twice when mounting a component. This can be mistakenly perceived as a bug in your code, but in reality, it is a feature of Strict Mode designed to detect effects that are not properly cleaned up after their execution.

The Problem and Initial Perception

In one of our projects, we encountered a problem where an API request inside useEffect was executed twice every time the component mounted in development mode. As a result, we were getting duplicate records in the table, which was unacceptable behavior for a resource loading page.

Example Code

useEffect(() => {
  console.log('mount'); // logs twice in dev, once in production
  const subscription = subscribeToUpdates();
  // no cleanup — this is the actual problem
}, []);

Why Does This Happen?

React 18 includes Strict Mode, which duplicates and unduplicates each component once in development mode. This is done to detect effects that are not properly cleaned up after their execution. In this case, the double call to useEffect in Strict Mode is not a bug in your code but rather indicates that you forgot to clean up resources after the effect has finished working.

How Does This Affect Production?

In production builds, this double call to useEffect does not occur. Therefore, issues you discover in development mode might only manifest under specific conditions in the production environment.

Example Code for Production Environment

if (process.env.NODE_ENV !== 'production') {
  useEffect(() => {
    console.log('mount'); // logs twice in dev, once in production
    const subscription = subscribeToUpdates();
    return () => {
      subscription.unsubscribe(); // Add cleanup logic here
    };
  }, []);
}

Should We Ignore or Suppress This?

This functionality of Strict Mode is not noise or useless information to be ignored. It is intended to detect effects that may be improperly cleaned up and lead to future problems. If the effect is properly cleaned up, it will safely reload upon re-mounting the component.

Tips for Writing Correct Code

1. Add Cleanup Logic: Ensure you add cleanup logic for all resources initialized inside useEffect.
2. Check Dependencies: Make sure the dependencies array (deps array) is correct and reflects all changes that should trigger a reload of the effect.
3. Use Cleanup Function: Return a cleanup function from useEffect to free resources when the effect is unmounted.

Conclusion

The double call of useEffect in development mode is not a bug in your code but a feature of Strict Mode designed to detect effects that may be improperly cleaned up. To avoid future issues, ensure you add cleanup logic for all resources and check the dependencies in the dependencies array.

SEO Title

useEffect Called Twice: Why and How to Fix

SEO Description

Learn why useEffect is called twice in development mode and how to fix this issue to avoid duplicate records in tables.

SEO Keywords

React, useEffect, Strict Mode, duplicate records, table

Tags

React, JavaScript, Development, Programming, Web Development