What is the purpose of rendering twice in strict mode?

If a function is pure, running it twice does not change its behaviour because a pure function produces the same result every time.

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.

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

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).

Components breaking this rule behave unpredictably and cause bugs.

Your component function body (only top-level logic, so this doesn’t include code inside event handlers)

Functions that you pass to useState, set functions, useMemo, or useReducer

Some class component methods like constructor, render, shouldComponentUpdate etc.