Why useEffect Runs Twice in React (Not a Bug)

If you notice that your useEffect hook runs twice when a component mounts, it can be confusing and may look like a bug.

This behavior happens in development mode when React Strict Mode is enabled. React intentionally runs certain lifecycle methods twice to help detect side effects and ensure your code is safe.

Example:

useEffect(() => {
console.log("Effect running");
}, []);

In development, this may log twice. In production, it will run only once.

You do not need to fix this. Instead, make sure your side effects are safe to run multiple times.

Avoid disabling Strict Mode unless absolutely necessary, as it helps catch potential issues early.