What is React strict mode?

The short answer

Strict mode is a development tool in React that helps you find bugs early. It does not render any visible UI and does not affect production builds. In development, it intentionally double-invokes certain functions (like component bodies and effects) to help you catch side effects, deprecated APIs, and other issues.

How to use it

Wrap your app (or part of it) in <StrictMode>:

Copy
import { StrictMode } from 'react';
function App() {
  return (
    <StrictMode>
      <MainContent />
    </StrictMode>
  );
}

What it does

1. Double-invokes components and effects

In development, React renders every component twice and runs every effect twice. This helps you find impure components and effects that have unintended side effects.

Copy
function Counter() {
  console.log('Rendered'); // logs twice in development
  const [count, setCount] = useState(0);
  return <p>{count}</p>;
}

If your component does something different on the second render (like modifying a global variable), strict mode helps you catch it.

2. Warns about deprecated APIs

It warns you when you use old APIs like findDOMNode, string refs, or the legacy context API.

3. Checks for missing cleanup in effects

By running effects twice (mount → cleanup → mount), strict mode verifies that your cleanup function properly undoes what the effect did.

Copy
useEffect(() => {
  const connection = createConnection();
  connection.connect();
  return () => connection.disconnect(); // cleanup must work correctly
}, []);

If disconnecting does not properly clean up, the double-mount will reveal the bug.

Important things to know

• Strict mode only runs in development. It has zero impact on production.
• It does not render extra DOM elements — <StrictMode> is invisible.
• The double-rendering can be confusing at first. If you see console.log firing twice, that is strict mode, not a bug.
• You can wrap just part of your app — you do not have to wrap everything.

Why interviewers ask this

This is a straightforward knowledge question. Interviewers want to see if you know what strict mode does and why the double-rendering happens. Many candidates get confused when they see effects running twice — knowing about strict mode shows you understand React's development experience.