Stale default values in Next.js after submitting a form action

[ChristianIvicevic]

Describe the bug and the expected behavior

After my server action has resolved and returned a successful response the form items are still showing the previous default values (reverting the newly entered values) despite me calling router.refresh() and fetching the latest data in the parent page and passing it down to the client component that renders the form.

To circumvent this issue I attempted to pass Date.now() as a key prop to my client component to force a full rerender which technically works, but it's noticeable that the form resets shortly to the previous default values and then updates with the new values.

Conform version

v1.2.2

Steps to Reproduce the Bug or Issue

1. Clone this branch of my fork: https://github.com/ChristianIvicevic/conform/tree/nextjs-stale-defaults
2. Open the Next.js example and go to the stale page
3. See the current value read from the database file above the input and how it changes after submitting the form, but the field not updating accordingly

What browsers are you seeing the problem on?

Chrome, Safari

Screenshots or Videos

CleanShot.2024-09-30.at.00.30.54.mp4

Additional context

No response

[bbaterdene-gh]

I managed to resolve my issue by using submission.reply() instead of returning an object. This approach ensures lastResult in the useForm hook stays updated as expected.

It might be helpful to adjust line 71 in examples/nextjs/app/actions.ts to use submission.reply().

[ChristianIvicevic]

This issue has been fairly old, but in the last week I changed over to use submission.reply() and unfortunately that never worked as expected either.

Chances are that the new React 19 changes which reset forms on submit do contribute to that behavior as well. Once I find some time in the next few days or weeks I will look into an updated reproduction to contribute in order to see whether it's an issue with conform or my custom helper.

[dariuscosden]

Having this issue as well, with submission.reply(). Any updates?

[mkazinauskas]

I found an issue in react for this:
facebook/react#32362

[dariuscosden]

I actually solved my problem by making sure that I pass initialValue: value ?? defaultValue instead of just the default value. That way, if there is a value, it gets set over the default.

That was enough for my use case, so hopefully it helps!