Forms with server action: form gets emptied after submit

[fikkatra]

Link to the code that reproduces this issue

https://github.com/fikkatra/next-form-poc

To Reproduce

1. Start the app by running npm run dev
2. Open the app in the browser at http://localhost:3000
3. Fill in the form and click the submit button
4. Result: the form is emptied after the submit. All input is lost.

Current vs. Expected behavior

I expect the form to contain the original data, since I am not resetting the form or redirecting. This is important in case of form validation errors (which I didn't include to keep the code simple).

Before submit:

Server console output:

submitForm action FormData {
  [Symbol(state)]: [
    {
      name: '$ACTION_ID_40d23cd8bd75560ac5be4fdcb74a7a5de0950cbc8e',
      value: ''
    },
    { name: 'firstName', value: 'My first name' },
    { name: 'lastName', value: 'My last name' }
  ]
}
 POST / 200 in 46ms

After submit:

Browser console:
[Fast Refresh] rebuilding

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:15 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 8
Binaries:
  Node: 18.20.4
  npm: 10.7.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: 15.0.3
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

I'm not using a canary version.

[Marabii]

Hey, that' s just the normal behavior of server actions inside next js, the solution would be to simply save the user input in a state (of course it has to be a client component) then set the value of the input to that state: . The value inside the input would be lost when the user clicks on submit but it will then be recovered by the state. i forked your repo and took liberty of adding some changes and using best practices. Hope you like it : "https://github.com/Marabii/next-form-poc". If you have any additional questions reach out to me.

[fikkatra]

Thanks for the clarification and the example @Marabii. In reality I'm trying to combine client side validation with react-hook-form and zod, and server-side validation (with zod + custom error cases). I have yet to find a blogpost or tutorial that combines these frameworks, I'm really struggling to get all of them to work nicely together. I'm surprised, since all of these libs are industry standards (or at least very popular), and combining client and serverside validation is also a best practice...

In any case: thanks for clarifying. I'll close this issue, since it's not really a bug.

[antdev1987]

but the documentation in the part of server actions and mutations says this,, (After hydration, the browser does not refresh on form submission.).,, i have also fix the issues but like fikkatra i want it sever side and to fix it i have to become it client

[Marabii]

I found this blog a while ago : "https://nehalist.io/react-hook-form-with-nextjs-server-actions/" hope you find it useful @fikkatra. You may want to use the useActionState hook instead of useFormStatus they used on the blog.

[fikkatra]

Yeah, I saw that one too and followed their instructions, but then I bumped into the emptied form issue... I thought it might have something to do with a newer or more recent next or react feature, since the blog still uses useFormStatus. So that brought me here in the first place 🤷‍♀️. They are also not storing the form values. Unless I overlooked something, the blog's implementation will have the same behavior upon submitting to the server, the form will be empty.

Thanks a lot for sharing though, and for taking the time to help me out!

[thatanjan]

I am also facing this problem in the next 15.

{    "next": "15.0.2",
    "react": "19.0.0-rc-02c0e824-20241028",
    "react-dom": "19.0.0-rc-02c0e824-20241028"
}

But it worked fine in :

{
 "next": "14.2.13",
 "react": "^18",
 "react-dom": "^18",
}

[antdev1987]

this is my solution but you have to use the "use client"
this is the handle submit

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>)=>{
    e.preventDefault(); // Evita el reload de la página
    const formData = new FormData(e.currentTarget);
    createEmployee(formData); // Envía los datos al server action
  }

and in the form you call your server action as normal
form action={createEmployee} onSubmit={handleSubmit}
createEmployee is the server action

[fikkatra]

Since it worked in a previous version according to @thatanjan , I'm reopening this issue.