React: Strict Mode (Double Rendering)

The most common question asked by junior developers building their first React application is:

"Why is my console.log() executing twice? Why is my API called twice on load?"

If you look at the root of a standard React application (like in main.jsx or index.js), you will find the answer wrapped around your <App /> component: <React.StrictMode>.

1. What is Strict Mode?

<React.StrictMode> is a developer tool. It is a wrapper component that does not render any visible UI. Instead, it activates additional checks and warnings for its descendants.

Its primary purposes are:

1. Identifying components with unsafe lifecycles or legacy APIs.
2. Warning about deprecated string ref API usage.
3. Detecting unexpected side effects by intentionally double-invoking functions.

Crucially, Strict Mode only runs in Development Mode. It is completely disabled in production builds, so your users will never experience the double-renders or performance hits.

2. Why Does it Double Render?

React components are strictly required to be pure functions with respect to rendering. This means if you provide a component the exact same props and state, it must return the exact same JSX without mutating anything outside of itself.

If a developer accidentally mutates a global variable or modifies the DOM directly inside the render body, they have introduced an impure side effect.

To catch these silent bugs early, Strict Mode intentionally mounts, unmounts, and re-mounts your components in quick succession.

function BadComponent() {
  // ❌ BAD: Mutating an external array directly in the render body
  globalArray.push("Item"); 
  
  return <div>Check the array</div>;
}

Without Strict Mode, globalArray would have 1 item. You might not notice the bug. With Strict Mode, the component is rendered twice, pushing 2 items into the array, making the bug painfully obvious to the developer so they can fix it before deploying to production.

3. Double useEffect Invocation

Since React 18, Strict Mode also simulates a component unmounting and remounting to ensure your useEffect hooks are resilient and properly cleaned up.

If your component mounts and fires an API call inside useEffect, Strict Mode will immediately tear it down and run it again.

useEffect(() => {
  console.log("Component Mounted!");
  
  // Strict Mode ensures you don't forget cleanup functions!
  return () => console.log("Component Unmounted!");
}, []);
 
// Console Output in Dev:
// "Component Mounted!"
// "Component Unmounted!"
// "Component Mounted!"

To solve API calls fetching twice in development, you should implement an AbortController to cancel the first ghost request, or use a robust fetching library like React Query that handles caching inherently.

Senior-Level Interview Answer

<React.StrictMode> is a development-only wrapper component designed to highlight potential issues and enforce React best practices. Its most notable behavior is intentionally double-invoking render phases and effect hooks (mount -> unmount -> mount). This mechanism aggressively surfaces impure functions, hidden side effects, and missing useEffect cleanup functions that could otherwise lead to memory leaks or stale closures in production. Because the React ecosystem is heavily shifting toward Concurrent Mode and interruptible rendering, guaranteeing component purity is mandatory. Strict mode ensures your code is resilient to these modern execution paradigms, and it is entirely stripped out during the production build process.

Common Interview Mistakes

❌ Disabling Strict Mode to "fix" the bug

If an interviewer asks, "How do you stop an API from fetching twice in your new React app?", a major red flag is answering, "I just delete <React.StrictMode> from index.js". Deleting Strict Mode hides the symptom but doesn't fix the architectural flaw (missing effect cleanup or lack of caching). Always explain how to write resilient effects rather than disabling the safeguard.