Why does the onChange event fire multiple times in React? What does it have to do with state type and strict pattern?

React onChange event triggers multiple times: Deeply explore the reason

In React application development, onChange events are triggered multiple times, which is often confusing. This article will analyze this issue in detail and explore its relationship with useState types and strict patterns.

The following sample code demonstrates this problem: Enter a character and the console prints the log twice. However, replacing useState({}) with useState(3) (changing the state type from object to primitive type), the log will only be printed once. This indicates that the status type affects the number of triggers of onChange event.

 import React, { useState } from "react";

export default function Child() {
  const [state, setState] = useState({}); // Change to useState(3) and only triggers const onChange = (e) => { // Pay attention to adding event parameters e
    console.log("onChange triggered", state, e.target.value); // Add output e.target.value
    setState({...state, value: e.target.value}); //Update state
  };

  Return (
    <div>
      <input type="text" onchange="{onChange}">
    </div>
  );
}

This phenomenon is closely related to React's StrictMode. Enable strict mode in a development environment, React will deliberately render twice to help developers spot potential problems such as unnecessary side effects as early as possible. These two renders are used to detect side effects and to actual DOM updates, respectively.

When the state is object type, since the object is a reference type, the object's reference address changes after setState. React detects this change in strict mode, triggering two renderings, resulting in onChange event being called twice. This will not happen to the original type (such as a number), because its value itself is updated directly and no new reference address will be generated.

The React documentation emphasizes that components should be kept as pure functions as possible, i.e. the same input (props, state, and context) should always produce the same output. Strict mode helps developers identify violations of this rule through two renderings.

Therefore, when encountering the problem of onChange event triggering multiple times during development, be sure to check:

1. Whether Strict Mode is enabled : In a development environment, Strict Mode triggers two renderings.
2. State Type : Using primitive type states can avoid repeated renderings caused by changes in reference type.
3. Event handling function : Ensure that the internal logic of the event handling function is correct and avoid unnecessary duplicate state updates. (In the above modification code, we added the event parameter e and used e.target.value to get the input value, showing the status update more clearly.)

Understanding React strict patterns and their impact on different data types is critical to writing efficient and predictable React applications. In production environments, strict mode is often disabled to avoid performance issues.

The above is the detailed content of Why does the onChange event fire multiple times in React? What does it have to do with state type and strict pattern?. For more information, please follow other related articles on the PHP Chinese website!