why the normal counter runs only last setCount argument and functional counter runs all setCount

Viewed 13

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>
 );
}

0 Answers
Related