Why Do Strict Mode and useState Cause Multiple Component Renders?

Why Does useState Cause the Component to Render Multiple Times During an Update?

In the provided code snippet, the App component is wrapped in React.StrictMode, which enables strict mode. In this mode, React intentionally double-invokes various functions, including:

• Function component bodies
• Functions passed to useState, useMemo, or useReducer

In your case, the chaneNumber function is double-invoked due to the use of useState. Each invocation of this function triggers a state update, causing the component to re-render.

Solution:

Avoid wrapping the App component in React.StrictMode. This will prevent the double-invocation of the state-changing function, resulting in the component rendering only once during an update.

The above is the detailed content of Why Do Strict Mode and useState Cause Multiple Component Renders?. For more information, please follow other related articles on the PHP Chinese website!