Why does React's onChange event fire multiple times after entering a character?

In-depth discussion on the root cause of React onChange event triggering multiple times

In React development, onChange event triggering multiple times is a common problem, especially when entering characters in the input box. This article will explore the reasons behind this phenomenon in depth and provide solutions.

Let's look at a sample code first:

 import React, { useState } from "react";

export default function MyComponent() {
  const [inputValue, setInputValue] = useState({}); // Note that this is the object type const handleChange = (event) => {
    setInputValue(event.target.value);
    console.log("onChange triggered:", inputValue);
  };

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

In this example, if the initial value of useState is an object {} , then each input will cause onChange to fire multiple times. However, if you change the initial value to a primitive type, such as useState("") , the problem disappears. Why?

This is not a bug in React, but a result of the combined effect of React strict mode (StrictMode) and the asynchronous characteristics of state updates .

1. React strict mode:

In a development environment, enabling strict mode performs additional checks, including two renderings of components. The first render is used to detect side effects, and the second render is the actual DOM update.

2. Asynchronous characteristics of status update:

State updates in React are asynchronous. This means that setInputValue does not update the component's state immediately, but instead queues for the next rendering cycle.

When using an object as state:

• First rendering: component rendering, inputValue is {} .
• Input character: onChange triggers, setInputValue is called, but inputValue is not updated immediately.
• Second rendering: React detects a status update and re-renders the component. At this time, inputValue is updated to the new value. onChange fires again, printing the updated value.

When using the original type as the state:

• First rendering: component rendering, inputValue is "" .
• Input characters: onChange triggers, setInputValue is called. Although the update is asynchronous, the update of the original type will not trigger additional rendering.

Solution:

To avoid onChange event being fired multiple times, you can use the following method:

• Use functional update: Use setInputValue to update function:

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

• Use anti-shake or throttling: If frequent operation of the input is required, you can use anti-shake or throttling technology to limit the trigger frequency of onChange .

• Avoid using state directly in onChange: you can store the input value in an intermediate variable and update the status if needed.

By understanding React's strict pattern and state update mechanism, we can effectively solve the problem of onChange event triggering multiple times and write more efficient and stable React code. Remember that choosing the right initial state type (primitive types are usually easier) and using functional updates are key.

The above is the detailed content of Why does React's onChange event fire multiple times after entering a character?. For more information, please follow other related articles on the PHP Chinese website!