React StrictMode
What StrictMode Does
Wrapping part of your app in <React.StrictMode> enables extra development-only checks and warnings, including intentionally double-invoking certain functions (like component bodies) to help surface bugs from unsafe side effects.
Note: StrictMode only runs its extra checks in development -- it has no effect on the production build your users receive.
Warning: Seeing a component's console.log() print twice on mount is expected behavior under StrictMode in development, not a bug in your code.
Example: What StrictMode Does
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function StrictNote() {
return <p>Wrap the app root in <React.StrictMode> to enable extra dev checks.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<StrictNote />
</React.StrictMode>
);
</script>
</body>
</html>What StrictMode Helps Catch
StrictMode helps surface components with side effects that aren't properly cleaned up, deprecated API usage, and other patterns that could break under future React features like concurrent rendering.
Note: Treat a StrictMode warning as a real signal to investigate, not noise to silence.
Warning: StrictMode does not catch every possible bug -- it specifically targets a known set of unsafe patterns, not general logic errors.
Example: What StrictMode Helps Catch
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function EffectNote() {
React.useEffect(() => {
console.log('Effect ran -- StrictMode intentionally runs this twice in dev');
}, []);
return <p>Check the console for the double-run in development.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<EffectNote />
</React.StrictMode>
);
</script>
</body>
</html>Enabling StrictMode in Your App
StrictMode is enabled by wrapping any part of your component tree in a <React.StrictMode> element. It adds no visible UI of its own -- it only activates extra development-time checks for the components nested inside it. You can wrap your whole app, or just a section you want to check.
Note: Wrap your top-level <App /> in <React.StrictMode> in development so every component benefits from the extra checks.
Warning: StrictMode checks are automatically skipped in a production build, so relying on its warnings alone will not catch bugs after deployment.
Example: Enabling StrictMode in Your App
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Greeting() {
return <p>Hello from a StrictMode-wrapped component!</p>;
}
function App() {
return (
<React.StrictMode>
<Greeting />
</React.StrictMode>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Being confused when components render twice in development -- that's StrictMode intentionally checking for side effects, not a bug.
- Assuming StrictMode affects the production build -- it only runs its extra checks in development.
- Wrapping only part of the app and being surprised other parts don't get the same warnings.
<React.StrictMode>enables extra development-only checks for its child components.- It has no visual output and doesn't affect the rendered UI.
- It helps catch unsafe lifecycle usage and unexpected side effects early.
- All checks are automatically disabled in production builds.
No browser-specific restrictions -- available since React 16.3; development-mode only.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: