[React 19] State dispatch get stuck during an async form action (bug?)

[leoyli]

In react 19 latest beta (2024.05.25).

The state dispatched in a form action never get committed by React if the form action is pending. The state only changed after the action completed. I'm not sure if this something a bug or a rule must be followed. It seems a bit surprising.

Let's say a naive component like this.

function Demo() {
  const [state, setState] = useState("A");

  const [, submitAction, isPending] = useActionState(async () => {
    setState("B")
    await sleep(60 * 1000)
    setState("C")
  }, null);

  return (
    <form action={submitAction}>
      <span>{x}</span>
      <button type="submit">Submit</button>
    </form>
  );
}

One will only see the value A and continue seeing value A from a minutes after submission, then they will see C. Value B was never printed on the screen.

This seems not really related to the hook but the form action prop. What I want to do is to trigger some async validation before I call the api from the action. Sometimes, the validation resulted a warning that I want the component to enter a "confirmation" state, but I cannot do anything if the action is triggered by the action prop.

[mkrause]

I'm seeing the same problem, but in my case not even with useActionState, just useTransition. See also this issue which may be related: #28923

[leoyli]

For anyone face the same issue, my workaround is going with useRef, which I park a flag for the state. The outside can then pick it up because isPending will tick a rerender. But this is really dirty, and if you have more than 1 awaiting promises in the the action, this won't work.

[eps1lon]

The state dispatched in a form action never get committed by React if the form action is pending.

This is expected. React will start rendering all the state updates during the transition but not commit them until the Transition finishes.

If you want to commit state during a transition (that is reverted once the Transition finishes), use useOptimistic

[DavidCodina]

You could also do this:

queueMicrotask(() => { setState("B") })

Let me know if anyone has a reason why that's a bad idea. Also the useOptimistic solution works great!