Why the first one is only running the last setCount argument and when we are using the arrow function for setCount it's running both the argument.
eg: if you click the Normal button the count will be 5 as it should be 9
If you click the Functional button the count will be 2 as it is running both the SetCount
import react, { useState, useEffect } from "react";
export default function App() {
const [count, setCount] = useState(0);
console.log(count);
return (
<div className="App">
<button
onClick={() => {
setCount(count + 1);
setCount(count + 3);
setCount(count + 5);
}}
>
Normal
</button>
<br />
<button
onClick={() => {
setCount((c) => c + 1);
setCount((c) => c + 1);
}}
>
Functional
</button>
</div>
);
}