Why does the onChange event in React fire multiple times when input?

OnChange event triggers multiple times in React: In-depth discussion

In React development, the onChange event of the input box is sometimes accidentally triggered multiple times. This article will analyze this problem in depth and provide a solution.

Problem description

A simple React component that manages state using useState hook and updates the state and prints in onChange event in the input box. However, when entering a character, the console prints twice. This phenomenon is especially obvious when using object type states, but does not occur when using primitive type states.

Sample code snippet (problem code):

 import React, { useState } from "react";

export default function Child() {
  const [state, setState] = useState({});

  const onChange = (event) => {
    setState({ ...state, value: event.target.value });
    console.log("onChange triggered", state);
  };

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

Problem analysis

The root of this problem lies in React's Strict Mode. In a development environment, Strict Mode performs two renderings to help developers discover potential problems, such as unnecessary side effects.

When the state is object type, setState updates the reference to the object, not the value itself. Double rendering of Strict Mode causes onChange event to be called twice, each time the same object reference is updated. The original type state (such as strings, numbers) directly updates the value, so this problem will not occur.

root cause

• Reference update of object type state: When using an object as state, setState will create a new object, but console.log inside the onChange function still prints the old state because of React's asynchronous update mechanism. The status is updated to a new value only during the second rendering.
• Dual rendering of Strict Mode: Strict Mode in the development environment triggers dual rendering, exacerbating this problem.

Solution

Avoid using object type state, or optimize the call method of setState :

Method 1: Use the original type state

Change the state to the original type, such as a string:

 import React, { useState } from "react";

export default function Child() {
  const [inputValue, setInputValue] = useState("");

  const onChange = (event) => {
    setInputValue(event.target.value);
    console.log("onChange triggered", inputValue);
  };

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

Method 2: Use functional updates

Use functional updates setState to ensure that each update is based on the latest status:

 import React, { useState } from "react";

export default function Child() {
  const [state, setState] = useState({});

  const onChange = (event) => {
    setState((prevState) => ({ ...prevState, value: event.target.value }));
    console.log("onChange triggered", state);
  };

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

Through the above methods, the problem of onChange event triggering multiple times in React can be effectively solved. Remember, Strict Mode is disabled in production environments, so this problem usually only occurs in development environments.

The above is the detailed content of Why does the onChange event in React fire multiple times when input?. For more information, please follow other related articles on the PHP Chinese website!