反应钩子 useState 钩子

Question

The doubt is, in the webpage the value gets incremented and displays but in console it displays the previous value......what am i not understanding?

when i click on the button, in the webpage the value gets incremented but whereas at the console output it's still the previous value:/

function App() {
  function handleClick()
  {
 
    setValue((prev)=>prev+1)
    console.log(value)

  }
  const [value,setValue]=useState(0);
  return (

    <div className="App" style={{fontSize:"100px"}}>
      {value}
      <button onClick={handleClick}>increment</button>
    </div>
  );
}

export default App;

Answer 1

This is beacause setValuse is async function, and value in state will be update in next renderer.

Check this:

  function handleClick()
  {
 
    setValue((prev)=>prev+1)
    console.log(value)

  }
  const [value,setValue]=useState(0);
  
  useEffect(() => { console.log(value)}, [value])