import "./styles.css";
import { useRef, useState } from "react";
export default function App() { const [count, setCount] = useState(0); const ref = useRef(null); const handleClick = () => { setCount(count + 1); setCount((pre) => pre + 1); }; return ( <div className="App"> <button onClick={handleClick}>+</button> <h1>{count}</h1> <h2>Start editing to see some magic happen!</h2> </div> );
} demo site as following. https://codesandbox.io/p/sandbox/affectionate-merkle-nrfkvh?file=%2Fsrc%2FApp.js%3A1%2C1-17%2C2
when i click the button, the count increased two at one time,but when i change code order in the handleClick function, seem like
const handleClick = () => { setCount((pre) => pre + 1); setCount(count + 1); };
the count increased one at one time.
why? i hope someone can help me to explain this,thank you