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?
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.