useTransition(): startTransition after await

[TheAlexGo]

Hello guys!

I've been using useTransition in my projects for a while now, but only now I noticed the following problem: https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition. Like, any state update needs to be put in startTransition, even if we are already inside a transition.

Let's look at the example https://react.dev/reference/react/useTransition#examples:
Here in App.tsx is the code:

const updateQuantityAction = async newQuantity => {
    // To access the pending state of a transition,
    // call startTransition again.
    startTransition(async () => {
      const savedQuantity = await updateQuantity(newQuantity);
      startTransition(() => {
        setQuantity(savedQuantity);
      });
    });
  };

If you remove startTransition above setQuantity(savedQuantity):

const updateQuantityAction = async newQuantity => {
    // To access the pending state of a transition,
    // call startTransition again.
    startTransition(async () => {
      const savedQuantity = await updateQuantity(newQuantity);
      setQuantity(savedQuantity);
    });
  };

then... nothing will change. Absolutely.

I don't really understand this rule, if everything works correctly without it.

Here's my example:

const onSubmit = (data: VerticalFormValues) => {
    startTransition(async () => {
      const res = await handleCreate(data);

      if (res.success) {
        form.reset();
        closeAddVerticalDialog();
        router.refresh();
      }
    });
  };

Do you think I need to use startTransition inside the condition?

if (res.success) {
        form.reset();
        closeAddVerticalDialog();
        router.refresh();
}