反应批处理如何工作？

Question

I have one select field and onselect event I have three setStates call to update my local states.

Observation: The number of setStates written causes that much re render. When I commented setState it reduced accordingly.

Ex:

<select name="cars" id="cars" onselect={(e) => handleSelect(e)}>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

const handleSelect = e => {
    setInvalid(false);
    setValue("some value");
    setError("some error");
};

My understanding was it will do batching and cause only one render. But got 3 re-renders. Any explanation to this?

Answer 1

with react18 Automatic Batching gets applied by default ,if you have return n number of state updates inside a function react will only re-render the component once . If you want to stop this behavior you can use flushSync

import { flushSync } from "react-dom";
 const clickMe = () => {
    setName("abc");
    flushSync(() => {
      setCount(30);
      // react will create a re-render here
    });
    setAge(30);
    setPin(1111);
  };

so for the above example react will re-render your component twice when clicking on clickMe() function, but if you are on the older version < 18 the re-render will take place n number of times.