Next.js Discord

Discord Forum

useFormState returns stale data and Suspense boundaries reload with loading.tsx and revalidatePath

Unanswered
Peruvian anchoveta posted this in #help-forum
Open in Discord
Peruvian anchovetaOP
I'm working on describing an issue (or maybe two issues) I'm seeing when using these things together:
- loading.tsx file for the route
- a page containing a suspended component
- a server action that runs revalidatePath.
- useFormState or useActionState to receive state returned from the server action. (The issue occurs with both in the latest v14 and the v15 RC)

I've deployed a minimal reproduction you can interact with here: https://next-loading-revalidate-refresh-issue.vercel.app/
Source: https://github.com/shaunchurch/next-loading-revalidate-refresh-issue
And posted an issue on the github: https://github.com/vercel/next.js/issues/66426

Expected behaviour:
The page loads, displays the loading file, renders the page, shows the suspense fallback, renders the suspended component.

Then, clicking the button runs the server action, revalidates the path, and returns a value without a page refresh or triggering the suspended component to re suspend.

Actual behaviour:

The first time this sequence occurs by clicking the button after a full page refresh I see the following behaviour that seems unexpected:
- useFormState state is stale, continues to display the initial state
- The page refreshes and refetches suspended components

The second time the button is clicked things go back to working as expected. This is true for the rest of the user session until a full manual refresh.

If I delete the loading.tsx file, everything remaining works as expected.
If I delete the revalidatePath call in the server action, everything remaining works as expected.

Using all of these pieces together is causing some issues and I'd be grateful for any help debugging this and getting some visibility on the issue.

0 Replies