While working with multiple set functions of a useState hook, I noticed different behaviors when calling them in sync and async functions.
function Test() {
console.log('app rendering starts.');
const [a, setA] = useState(1);
const [b, setB] = useState(11);
const updateState = () => {
console.log('\tupdating a starts.');
setA(2);
console.log('\tupdating a ends.');
console.log('\tupdating b starts.');
setB(12);
console.log('\tupdating b ends.');
};
console.log('app rendering ends.');
return (
<div className="App">
<div>a is {a}</div>
<div>b is {b}</div>
<button onClick={() => {
console.log('--------------sync click--------------');
updateState();
}}>Update State a & b Sync</button>
<button onClick={() => {
console.log('--------------async click--------------');
setTimeout(updateState, 0)
}}>Update State a & b Async</button>
</div>
);
}
Even though both buttons execute the same code, they produce different results.
Sync button outcome:
app rendering starts.
app rendering ends.
--------------sync click--------------
updating a starts.
updating a ends.
updating b starts.
updating b ends.
app rendering starts.
app rendering ends.
Async button outcome:
app rendering starts.
app rendering ends.
--------------async click--------------
updating a starts.
app rendering starts.
app rendering ends.
updating a ends.
updating b starts.
app rendering starts.
app rendering ends.
updating b ends.
Is this behavior intended?
How can I achieve a synchronous result in an asynchronous function?
I couldn't find any guidance on this in official documentation.
Any assistance would be greatly appreciated.
Thank you!