i have quesetions in a Usestate demo

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) => pr…


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


Print Share Comment Cite Upload Translate Updates
APA

yinguzwg-1 | Sciencx (2024-07-15T01:09:37+00:00) i have quesetions in a Usestate demo. Retrieved from https://www.scien.cx/2024/07/15/i-have-quesetions-in-a-usestate-demo/

MLA
" » i have quesetions in a Usestate demo." yinguzwg-1 | Sciencx - Monday July 15, 2024, https://www.scien.cx/2024/07/15/i-have-quesetions-in-a-usestate-demo/
HARVARD
yinguzwg-1 | Sciencx Monday July 15, 2024 » i have quesetions in a Usestate demo., viewed ,<https://www.scien.cx/2024/07/15/i-have-quesetions-in-a-usestate-demo/>
VANCOUVER
yinguzwg-1 | Sciencx - » i have quesetions in a Usestate demo. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/15/i-have-quesetions-in-a-usestate-demo/
CHICAGO
" » i have quesetions in a Usestate demo." yinguzwg-1 | Sciencx - Accessed . https://www.scien.cx/2024/07/15/i-have-quesetions-in-a-usestate-demo/
IEEE
" » i have quesetions in a Usestate demo." yinguzwg-1 | Sciencx [Online]. Available: https://www.scien.cx/2024/07/15/i-have-quesetions-in-a-usestate-demo/. [Accessed: ]
rf:citation
» i have quesetions in a Usestate demo | yinguzwg-1 | Sciencx | https://www.scien.cx/2024/07/15/i-have-quesetions-in-a-usestate-demo/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.