use-callback.js

import { useCallback, useState } from "react";
import { wait } from "./src/FunctionalUpdates/wait";

export function FunctionalUpdates() {
  const [counter, setCounter] = useState(0);

  function handleIncrement() {
    setCounter(counter + 1);
  }

  const handleIncrementCallback = useCallback(async () => {
    await wait({ miliseconds: 2000 });
    setCounter(counter + 1);
  }, [counter, setCounter]);

  return (
    <div>
      <div>Counter value: {counter}</div>
      <button onClick={handleIncrement}>
        Increment
      </button>
      <button onClick={handleIncrementCallback}>
        Increment useCallback
      </button>
    </div>
  );
}