What is React.StrictMode and what does it do?
React.StrictMode is a development-only wrapper that highlights potential problems in your component tree. It doesn't render anything visible and has no effect in production builds.
Double-invokes render and effects — runs functional components twice (in dev only) to surface impurities and effect bugs.
Warns about deprecated APIs — legacy lifecycle methods, legacy context, string refs, find DOM node.
Detects unsafe side effects — effects with missing cleanup, mutations during render.
Future-proofing — ensures your code is compatible with concurrent React features.
Wrap your root — typically
<StrictMode><App /></StrictMode>inmain.jsx; can also wrap subtrees during migration.Production = no-op — zero runtime cost when shipped.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
// Wrap your app (or specific subtrees)
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);
// What StrictMode detects:
function BuggyComponent() {
// Double-invoked in dev to catch impure renders
console.log('Rendered'); // Logs twice in development
useEffect(() => {
const conn = createConnection();
conn.connect();
// StrictMode reveals missing cleanup:
return () => conn.disconnect(); // This cleanup is essential
}, []);
return <div>Content</div>;
}StrictMode wraps the entire app at the root level. In development, it double-invokes renders and effects.
The BuggyComponent's console.log fires twice, helping developers notice if their render function has side effects. The effect cleanup (disconnect) is verified by the mount-unmount-remount cycle.
The most common interview question about StrictMode is 'why does my useEffect run twice?' Explain that it is development-only behavior to catch missing cleanups and impure functions. It does NOT happen in production.