Back to results for “Custom Hooks”
React › Strict Mode & Concurrent Features

Why does Strict Mode call component functions and certain effects twice during development?

Intermediate

Answer

This intentional double calling helps reveal components or effects that are not properly written to handle being interrupted or repeated, which matters for React's newer concurrent rendering features. If running something twice causes a visible problem, it usually means that code has a hidden bug, such as an effect missing its cleanup function.
useEffect(() => {
  const subscription = subscribeToUpdates();
  return () => subscription.unsubscribe(); // without this cleanup, Strict Mode reveals a leak
}, []);
Real-world example A developer notices duplicate event subscriptions appearing only in development with Strict Mode enabled, and traces it back to an effect that was missing its cleanup function, a real bug that Strict Mode helped catch early.

Common follow-ups: Would this same duplicate subscription bug also happen in production without Strict Mode?;How do you fix a component that behaves unexpectedly when Strict Mode calls it twice?