What am I not getting about the useTransition hook?

Mauricio — Tue, 25 Oct 2022 06:20:36 +0000

So, I'm trying to learn how to use the useTransition hook, what I expect this code to do is to disable the button to increment and only enable it after the counter has changed. But the "isPending" is changing rigth after the click (I believe just on the next render).

As you can see there is a small flicker of a "Loading..." text on the bottom of the image, and it doesn't wait for the counter to update, what am I missing here? is this not the intended use case for this hook?

Here's the code for the example above

import "./styles.css";
import { useState, useTransition } from "react";

export default function App() {
  const [counter, setCounter] = useState(10);
  const [isPending, startTransition] = useTransition();

  const increment = async () => {
    await new Promise((r) => setTimeout(r, 1000));
    setCounter((e) => e + 1);
  };

  const onClickIncrement = (e) => {
    startTransition(() => {
      increment();
    });
  };

  return (
    <div className="App">
      <h1>{counter}</h1>
      <button disabled={isPending} onClick={onClickIncrement}>
        Click me!
      </button>
      <p>{isPending && <small>Loading...</small>}</p>
    </div>
  );
}

DEV Community: Mauricio

What am I not getting about the useTransition hook?