Bug: pending attribute from useFormStatus is stuck as "true" when form action takes longer than ~5s to resolve

[Veath]

React version: canary

Steps To Reproduce

1. open example link-This is a demo example from the official website, only the settimeout time has been changed.（form action resolve promise after 10 seconds）
2. click submit button
3. see the button text

Link to code example: https://codesandbox.io/s/useformstatus-vzn8tm?file=/App.js:129-142

The current behavior

The button triggers the form action, and the pending useFormStatus is always true, even if the action is completed.

The expected behavior

The button triggers the form action. After the action is executed, useFormStatus should change from pending-true to pending-false.

Debug found that when the code is executed here-renderRootSync, throwValue has actually been resolved. If throwAndUnwindWorkLoop adds a then callback after resolved, it will not be triggered.

If you change the settimeout timer in the form action to a smaller value, such as 1000ms, then the code will go here renderRootConcurrent, and replaySuspendedUnitOfWork can start to re-render.

[mattcarrollcode]

Thanks for the bug report, I've reproduced the bug in a simpler codesandbox. It looks like right around 5s for a client action is the point when the pending property gets stuck and isn't updated: https://codesandbox.io/s/useformstatus-forked-vsdskv?file=/App.js

@acdlite can you take a look?

[mattcarrollcode]

I updated the CodeSandbox to highlight that issue occurs with a client action that takes 5s but not a action that takes 4s. Its on the experimental channel. In my experimentation it occurs somewhere between 4900ms and 5000ms: https://codesandbox.io/s/useformstatus-forked-vsdskv?file=/App.js

[Santiago-j-s]

https://codesandbox.io/p/sandbox/competent-chatelet-8qvvnm?file=%2Fapp%2Fpage.tsx%3A3%2C43

I have an interesting observation (I'm not sure if it's the same bug but it seems related) with useFormStatus and server actions:

• If a component only has the useFormStatus hook, it works correctly
• If the component also has an useEffect hook, it does not work. The pending status changes to false almost inmediately

[dev2xl]

I'm facing same issues:

• After triggering the action and pending goes to true, If the component is re-rendered after updating the state the pending status switch to false.
• Pending stuck as true for long taking actions

This is stopping me to use this on production. Please we need some fix asap. Thanks!

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[eps1lon]

This no longer reproduces on the latest Canary: https://codesandbox.io/p/sandbox/goofy-pasteur-268ly3

@dev2xl @Veath Could you confirm that you're also not seeing this issue in your apps anymore?