i have quesetions in a Usestate demo – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by yinguzwg-1

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

This content originally appeared on DEV Community and was authored by yinguzwg-1