reactjs - what happens in React hooks when executing some function after settingSomeState() function in parents function

Question

parent's clickHandler() function is called from its child, after executing setState() function What happens if on the next line is executed some other tasks ?

export default function App() {
  const [state, setState] = useState("initial state");

  const clickHandler = (e) => {
    console.log("onclick", state);
    setState(e.target.innerText);
    console.log("onclick", state);
  };

  return (
    <div className="App">
      <Child clickHandler={clickHandler} />
    </div>
  );
}


function Child({ clickHandler }) {
  return (
    <div className="Child">
      <button onClick={clickHandler}>Click me</button>
    </div>
  );
}

I am getting result onclick initial state two times, but I suppose to get onclick initial state first and onclick Click me second, or nothing at second time, why anyway it logs on secont time, does not setState supposed to cause rerender no matter what's next to execute in this function?

question from:https://stackoverflow.com/questions/66055148/what-happens-in-react-hooks-when-executing-some-function-after-settingsomestate

Answer 1

setState() from useState is executed asynchronously. Once the state is actually set it will trigger a re-render. Your second console.log will not reliably have the accurate state.

If you want something else to happen after state has been set you can use a useEffect like this.

useEffect(() => {
  console.log("State is:", state);
},[state]);

This will fire on load, and every time state is updated.