Strict mode and double rendering

ReactMiddle~3 min read

Short answer

React deliberately double-renders in dev mode to help you catch bugs and side effects in component functions that should not affect the render result.

This behavior is enabled only in development mode and does not happen in production.

Who is "to blame" - Strict Mode

The double render in React Dev happens because of the <React.StrictMode> component, which by default wraps the entire app in create-react-app, Next.js, and other CLIs.

javascript

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

What StrictMode does

React.StrictMode is a tool for developers that:

Calls components twice (in dev) → to check whether there are side effects in their body.
Calls useEffect and useLayoutEffect twice → to make sure cleanup works correctly.
Calls constructor, render, useMemo, useCallback, useState, and so on twice → to test the purity of the functions.

What a "pure function" means in the context of React

A React component is a pure function of its props and state: it must return the same JSX for the same input and must not trigger side effects (requests, timers, mutations, and so on) inside the function body itself.

Example of an "impure" component:

javascript

function Timer() {
  console.log('Starting the timer');
  setInterval(() => console.log('tick'), 1000);
  return <p>Timer</p>;
}

Here the side effect (setInterval) is triggered right during the render. When React calls it twice, this shows that:

two timers are created,
and one of them is not cleaned up - which is a logic bug.

Example of a double render

javascript

function Example() {
  console.log('Rendering the component');
  return <div>Hello</div>;
}

In dev mode you will see this in the console:

javascript

Rendering the component
Rendering the component

In production (or if you remove <StrictMode>) - only one call.

Why React does this

Goal	What it checks
Check the purity of components	Whether there are side effects during a render
Check that cleanup in effects is correct	`useEffect` and `useLayoutEffect` are called twice
Help catch bugs before production	For example, memory leaks, duplicate subscriptions
Warn about anti-patterns	API calls, timers, mutations in a component's body

Which methods React duplicates exactly

In StrictMode (dev only):

Called again:
- component functions;
- useState (initialization);
- useReducer (initialization);
- useMemo (initialization);
- useEffect (mount → unmount → mount);
- useLayoutEffect (similarly).
Not called again:
- componentDidCatch;
- getDerivedStateFromError (so as not to break error handling);
- events and real DOM operations (they run once).

How it looks step by step

React calls the component → does a "virtual" render.
It immediately unmounts it (calling the effects' cleanup).
It mounts it again from scratch.

All of this happens in memory, without touching the DOM again, so the interface does not "flicker" - only the console shows the repeated calls.

How to disable the double render

To temporarily remove the double calls - just remove StrictMode:

javascript

root.render(
  // Without <React.StrictMode>
  <App />
);

But this is not recommended:

StrictMode helps catch bugs before production. It is better to fix the code so it is "pure".

How to write code that works correctly in StrictMode

Allowed:

javascript

function Component() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id); // cleanup!
  }, []);

  return <div>{count}</div>;
}

Not allowed:

javascript

function Component() {
  // Side effect in the function body
  setInterval(() => console.log('tick'), 1000);
  return <div>Hello</div>;
}

Summary

Question	Answer
Why the double render?	Because of `<React.StrictMode>`
When does it happen?	Only in dev mode
Why is it needed?	To find side effects and bugs in components
Does it happen in production?	No
How to disable it?	Remove `<React.StrictMode>` (but you probably should not)

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.