Suggest an edit

Improve this article

Refine the answer for “Strict mode and double rendering”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. **Calls components twice** (in dev)
→ to check whether there are side effects in their body.
2. **Calls** `useEffect` **and** `useLayoutEffect` **twice**
→ to make sure cleanup works correctly.
3. **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

1. React calls the component → does a "virtual" render.
2. It immediately **unmounts** it (calling the effects' cleanup).
3. 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) |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts685 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.