React hooks. How to call a function with updated state?

Question

React

Here is an example code:

function App() {
  const [count, setCount] = useState(0);

  const printCount = () =>{
    console.log(count);
  };

  const incCount = () => {
    setCount(count + 1);
    printCount();
  };

  return (
    <div className="App">
      <button onClick={() => { incCount(); }}>Inc count</button>
      <div>{count}</div>
    </div>
  );
}

When you click on the "Inc count" button, the incCount method is called in which the count value is increased and then the printCount method is immediately called, which displays the count value to the console. So, when you clicked, the value of count increased and became equal to "1", but the value "0" is displayed in the console, that is, the old value. As if the incCount and printCount methods work asynchronously and incCount does not have time to change the value before calling printCount. How to call several methods in a row and at the same time be sure that they will work with the updated state?

Answer 1

To do this, useEffect is used in this case, the function will be called every time the count changes, and you can already add anything to it, similar to how the callback works in setState

Answer 2

it just happened

export default function App() {
  let [count, setCount] = useState(0); // const >>> let

  const printCount = () =>{
    console.log(count);
  };

  const incCount = () => {
    count++; ///////////////////////// increment
    setCount(count); /////////////// set
    printCount();
  };

  return (
    <div className="App">
      <button onClick={() => { incCount(); }}>Inc count</button>
      <div>{count}</div>
    </div>
  );
}