What will be the output in console for the following code when button is clicked:
import { useState, Suspense } from "react";
export default function App() {
const [count, setCount] = useState(0);
const updateCount = () => {
setCount(count + 1);
setCount(count + 2);
}
console.log(count);
return (
<button onClick={updateCount}>{count} Count</button>
);
}
On first render
count = 0
0 Count
Click the button (1st time)
React sees two updates:
setCount(count + 1)
β wants to set count = 1
setCount(count + 2)
β wants to set count = 2
React batches updates β the last one wins (count = 2
)
Console shows: 2
Button shows: 2 Count
Click the button (2nd time)
Now count = 2
Updates:
setCount(count + 1)
β count = 3
setCount(count + 2)
β count = 4
(last one wins)Console shows: 4
Button shows: 4 Count
0 // initial render
2 // after first click
4 // after second click
6 // after third click
... and so on