StrictMode

StrictMode

StrictMode is a development tool that intentionally stresses your components to surface bugs that would otherwise be hard to find. It has no effect in production.

Enabling It

import { StrictMode } from 'react';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

It can also wrap specific subtrees:

<StrictMode>
  <SuspiciousComponent />
</StrictMode>

What StrictMode Does

Double-invokes render functions

In development, React calls component functions, useState initializers, useMemo, and useReducer reducers twice, discarding the first result:

function Counter() {
  const [count, setCount] = useState(() => {
    console.log('init'); // logs twice in dev, once in prod
    return 0;
  });
  console.log('render'); // logs twice in dev
  return <div>{count}</div>;
}

Purpose: detect side effects in functions that must be pure (render, initializers, reducers).

Double-invokes effects

React mounts, unmounts, then remounts every component:

useEffect(() => {
  const sub = subscribe(channel);
  console.log('mounted'); // logs twice in dev

  return () => {
    sub.unsubscribe();
    console.log('unmounted'); // logs once between the two mounts
  };
}, []);

Purpose: verify that cleanup fully reverses setup. If the second mount breaks something, your cleanup is incomplete.

Warns about deprecated APIs

StrictMode detects usage of deprecated lifecycle methods (componentWillMount, componentWillReceiveProps, componentWillUpdate) and logs warnings.

Common Bug StrictMode Catches

let id = 0;

function Component() {
  // Bug: side effect in render
  id += 1; // id is 2 after one render in StrictMode
  return <div data-id={id} />;
}

Double-invoke makes the bug obvious immediately. In production, this causes hard-to-reproduce inconsistencies.

Effect That Breaks on Double-Mount

useEffect(() => {
  const connection = connectToServer(); // connects twice in dev
  return () => connection.close();     // closes once between mounts
}, []);

If the second connection silently fails or leaves state wrong, StrictMode catches it. Fix by making the cleanup complete.

Do Not Suppress Warnings

If a StrictMode warning appears, fix the underlying issue. The most common case is an effect that needs a cleanup function it doesn’t have.

---