React · Chapter 39 of 42
React Strict Mode
`<StrictMode>` is a development-only tool that helps find potential problems in your app, such as unsafe lifecycle usage or side effects with unexpected behaviors. It does not render any visible UI.
In development, Strict Mode intentionally double-invokes certain functions (like component render and effects) to help surface bugs caused by impure code.
What it checks
Strict Mode warns about deprecated APIs, unexpected side effects in render, and helps prepare your app for future React features like concurrent rendering.
Double rendering
In development only, components may render twice and effects may run twice to help you catch non-idempotent logic; this doesn't happen in production.
Example 1 (jsx)
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>
);Output
(App renders normally; extra dev-only checks run in the background)Wrapping the app root in StrictMode enables extra development checks.
Key points
- StrictMode is a development-only diagnostic tool.
- It renders no visible UI itself.
- It intentionally double-invokes renders/effects in dev to catch bugs.
- It has no effect on the production build's behavior.
💡 Note: If your app breaks under StrictMode, it usually reveals a real bug (like a missing effect cleanup).