React Basics
React StrictMode
StrictMode is a development-only wrapper that switches on extra checks. It deliberately calls component functions, effect setup and cleanup twice so that impure logic, missing cleanups and deprecated APIs surface immediately instead of in production.
What is StrictMode in React?
StrictMode is a development-only wrapper that switches on extra checks. It deliberately calls component functions, effect setup and cleanup twice so that impure logic, missing cleanups and deprecated APIs surface immediately instead of in production.
Why StrictMode matters
Almost every beginner asks why their fetch fires twice or their console.log prints twice. The answer is StrictMode, and the double-invocation is a feature: if your code breaks when run twice, it has a real bug that concurrent rendering would eventually expose.
StrictMode example
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);How this works
Nothing is rendered by StrictMode itself. In development it re-runs certain functions and warns about unsafe patterns; in a production build it is stripped out completely and has zero cost.
Key points to remember
- Double-invocation happens in development only, never in the production bundle.
- It flags legacy lifecycle methods, deprecated findDOMNode and unsafe string refs.
- Effects run setup → cleanup → setup on mount, which is how missing cleanups get caught.
- Keep it enabled — removing it hides bugs rather than fixing them.
Common mistakes with StrictMode
- Deleting StrictMode to stop duplicate API calls instead of adding an AbortController cleanup.
- Measuring performance in development and blaming React for the double work.
If a duplicated effect causes a visible problem, the fix is a cleanup function, not removing StrictMode. Cleanups are what make your component safe to mount, unmount and remount.
React StrictMode— Interview Questions & FAQs
Why does my API call run twice in development?+
StrictMode mounts, unmounts and remounts each component once in development to verify your effects clean up correctly. Abort the request in the effect cleanup and the duplicate becomes harmless. Production runs it once.