React hooks useState hook [duplicate]

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;

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])