Why useEffect runs two times in local?

Problem Summary:

You're experiencing an issue where the useEffect hook runs twice in your local development environment but works as expected in your staging (production) environment.

Why This Happens:

In development mode, React's Strict Mode intentionally double-invokes certain lifecycle methods, including useEffect, to help developers catch side effects and ensure components are resilient. This double invocation is done to test if your components can handle mounting and unmounting multiple times without issues, which can help identify problems with components that have side effects.

• React Strict Mode: This is a development-only feature that intentionally triggers additional renders and checks for potential issues. This mode highlights unintended side effects by calling certain lifecycle methods (like useEffect) twice.

• Staging/Production Environment: React Strict Mode is disabled in production builds, which is why the behavior works as expected when deployed to staging or production environments. In these environments, useEffect runs only once, and the behavior matches your expectations.