What is the purpose of rendering twice in strict mode?

1
If a function is pure, running it twice does not change its behaviour because a pure function produces the same result every time.
2
However, if a function is impure (for example, it mutates the data it receives), running it twice tends to be noticeable (that’s what makes it impure!) This helps you spot and fix the bug early.
3
Strict Mode always calls your rendering function twice, so you can see the mistake right away (“Create Story” appears twice). This lets you notice such mistakes early in the process. When you fix your component to render in Strict Mode, you also fix many possible future production bugs
4
React assumes that every component we write is a pure function. This means that our components must always return the same JSX given the inputs are same (props, state, and context).
5
Components breaking this rule behave unpredictably and cause bugs.

To help you find accidentally impure code, Strict Mode calls some of your functions (only the ones that should be pure) twice in development. This includes:

1
Your component function body (only top-level logic, so this doesn’t include code inside event handlers)
2
Functions that you pass to useState, set functions, useMemo, or useReducer
3
Some class component methods like constructor, render, shouldComponentUpdate etc.

Difficulty: 5/10

Topics: StrictMode, double rendering, side effects

Scenario Questions

0-2 years experience

1
If you wrap a component tree in <React.StrictMode>, what will you observe happening to console.log statements during a component's first mount?
2
How would you test that a useEffect hook does not run its cleanup twice because of StrictMode's double render?

2-5 years experience

1
After enabling StrictMode, a component that fetches data in useEffect starts making two network requests. How would you debug and fix the issue?
2
You notice a state update is being applied twice when a button is clicked, but only after adding StrictMode. What could be causing this and how would you resolve it?
3
Explain why a mutable ref that is written to during render might break under StrictMode's double rendering.

5-8 years experience

1
In a large codebase, enabling StrictMode caused noticeable performance slow‑downs due to expensive renders. What refactoring strategies would you employ to mitigate the cost while preserving the safety checks?
2
Design a team‑wide guideline to ensure all side‑effectful code (e.g., data fetching, subscriptions) is safe under StrictMode, including testing and code‑review practices.

8+ years experience

1
Your organization plans to migrate the entire app to React 18 with StrictMode enabled by default. What architectural considerations and migration steps would you propose to handle the double‑render impact on legacy class components and third‑party libraries?
2
How would you set up CI/CD pipelines and monitoring to catch issues introduced by StrictMode's double rendering before they reach production?

Follow-up Questions

❓Can you give an example of a side‑effect that would be caught by this behavior?
❓What would you see differently if StrictMode were removed?
❓How does this double rendering affect performance during development?

</>

Loading Topics...

Questions