Q20: Why does React StrictMode render components twice in development?
<React.StrictMode> intentionally double-invokes component renders, useState updaters, and useEffect setup/cleanup functions in development mode only. This helps surface accidental side-effects during render phases, impure functions, and missing effect cleanups.
Wrapping Application in StrictMode
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
<StrictMode>
<App />
</StrictMode>
);💡 StrictMode double-runs development mounts to ensure setup and cleanup cycles are completely symmetrical.
Key Takeaways
- Only active in Development builds; has zero performance impact in Production.
- Surfaces side-effect bugs, impure renders, and uncleaned async subscriptions.
Knowledge Check
Does React StrictMode double-render components in Production environment builds?