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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.