Why Does a Component Render Twice on Every State Update in Strict Mode?

Understanding State Updates and Component Rendering

Despite not enabling strict mode explicitly, the issue of a component rendering twice on each state update stems from the use of React's Strict Mode.

In React, the App component is wrapped within React.StrictMode:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

According to React's documentation:

Strict Mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

• State updater functions (the first argument to setState)
• Functions passed to useState, useMemo, or useReducer

In your example, the chaneNumber function passed to the onClick handler triggers a state update using useState. As a result, React intentionally double-invokes this function in development mode. This is what causes the component to render twice on each state update.

This behavior is intended to help developers identify potential side effects or performance issues caused by state updates. By running the function twice, React ensures that any side effects 발생 twice, making it easier to debug and address any potential problems.

The above is the detailed content of Why Does a Component Render Twice on Every State Update in Strict Mode?. For more information, please follow other related articles on the PHP Chinese website!