Proof React's setState is asynchronous

setstate-is-async.tsx

import { useState, FC } from "react";

const App: FC = () => {
  const [number, setNumber] = useState(1);

  const nextNumber = number + 1;

  function handleIncrease() {
    setNumber((num) => num + 1);
    console.log("current number is", number); // still the old number
    console.log("next number is", nextNumber); // still the old next number
  }

  console.log("render");
  return (
    <div>
      <h1>
        Number: {number}; Next: {nextNumber}
      </h1>
      <button onClick={handleIncrease}>Increase</button>
    </div>
  );
};

export default App;