React Strict Mode (<StrictMode>) is a development-only wrapper that exposes subtle bugs before your code ships to production. It renders zero extra DOM elements and adds no overhead to production builds. Instead, it activates extra checks across any component tree nested inside it.
When <StrictMode> wraps your root <App /> (or a specific feature subtree), React intentionally runs certain functions twice in development:
useEffect: Mounts, runs cleanup, and re-runs setup once more so missing socket disconnects or timer clears stand out immediately.useState(() => ...) and setCount(prev => ...) twice to verify purity.findDOMNode, and unsafe lifecycle methods in the console.import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);
Suppose an effect opens a WebSocket connection or adds a window scroll listener without returning a cleanup function. When Strict Mode runs setup -> cleanup -> setup, you immediately notice duplicate listeners or double chat messages in development, rather than discovering memory leaks later when users switch routes.
<StrictMode> to Silence Double API Calls: Deleting <StrictMode> hides an uncleaned effect bug instead of fixing it. Use AbortController inside your useEffect cleanup to cancel stale fetches cleanly.No. Strict Mode checks are completely stripped when you create a production bundle (npm run build).
console.log statements print twice in gray text?React runs your render twice in Strict Mode to check purity and dims the second log in browser developer tools so you can distinguish it.
Yes. Wrap a single new feature component in <StrictMode> while leaving legacy code unwrapped during gradual upgrades.
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With