React: What is React 19 action-based transitions?

1import { useTransition } from "react";
2
3function UpdateName() {
4  const [name, setName] = useState("");
5  const [isPending, startTransition] = useTransition();
6  const [error, setError] = useState(null);
7
8  const submitAction = async () => {
9    startTransition(async () => {
10      try {
11        await updateName(name);
12      } catch (err) {
13        setError(err.message);
14      }
15    });
16  };
17
18  return (
19    <div>
20      <input value={name} onChange={e => setName(e.target.value)} />
21      <button onClick={submitAction} disabled={isPending}>
22        {isPending ? "Updating..." : "Update"}
23      </button>
24      {error && <p className="error">{error}</p>}
25    </div>
26  );
27}

1function TodoForm() {
2  const [isPending, startTransition] = useTransition();
3
4  const handleSubmit = async (formData: FormData) => {
5    startTransition(async () => {
6      await createTodo(formData);
7    });
8  };
9
10  return (
11    <form action={handleSubmit}>
12      <input name="title" type="text" />
13      <button type="submit" disabled={isPending}>
14        {isPending ? "Adding..." : "Add Todo"}
15      </button>
16    </form>
17  );
18}