Strict Mode
Why your components and effects run twice in development, and why that is actually a good thing.
What it is
<React.StrictMode> is a tool for highlighting potential problems in an application.
You usually wrap your entire app in it inside index.js or main.jsx.
**Crucially, it only runs in development.** It does absolutely nothing in production builds.
Why does my code run twice?
The most famous feature of Strict Mode is that it intentionally double-invokes your component functions and your useEffect hooks.
It mounts the component, immediately unmounts it, and then mounts it again. This means your setup effect runs, then your cleanup effect runs, then your setup effect runs again.
Why is that a good thing?
It acts as a stress test for your code.
If you wrote a useEffect that adds an event listener but you *forgot* to return a cleanup function, Strict Mode will cause that event listener to be added twice. You'll notice the bug immediately in development, rather than it slowly leaking memory in production.
It forces you to write pure components and perfect cleanup functions.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- Strict Mode is a development-only wrapper.
- It intentionally double-invokes components and effects.
- It exists to expose missing cleanup functions and impure renders.
- Do not panic if your API calls fire twice in development.
Done with this concept?
Mark it complete to track your progress. No login needed.