Debug: React useEffect fires twice in development

useEffect callback runs twice on mount in development, causing duplicate API calls or unexpected behavior.

This is intentional in React 18+ StrictMode. React mounts, unmounts, and remounts components to expose side-effect bugs.

Don't disable StrictMode. Instead, fix your effects:

// Problem: no cleanup
useEffect(() => {
  fetchData();
}, []);

// Fix 1: Use cleanup + abort controller
useEffect(() => {
  const controller = new AbortController();
  fetchData({ signal: controller.signal });
  return () => controller.abort();
}, []);

// Fix 2: Use a ref to track if already fetched
const fetched = useRef(false);
useEffect(() => {
  if (fetched.current) return;
  fetched.current = true;
  fetchData();
}, []);

// Fix 3: Use React Query / SWR (recommended)
const { data } = useQuery({ queryKey: ['data'], queryFn: fetchData });

The double-fire only happens in development, not production.

StrictMode double-invocation helps find effects that don't clean up properly. If your effect works correctly with double-invocation, it will also work correctly in production.

React 18+ development with StrictMode enabled