How can I make sure previous field values are kept after server errors?

[DarkstarXDD]

Hi, I have an extremely simple conform form setup in Next.js using server actions and useActionState.

However, currently when an error is returned from the server, the form loses the current values in the field. I read that React resets the form after a form submission (to match the native behavior I guess), so in order to keep the current (or technically previous) field values after a submission I should use the return value from the useActionState. And if I understood it correctly conform does this automatically for me when I use useForm({lastResult}).

But somehow in my current setup the returned value is not used. What am I missing here? I checked the docs a lot but somehow couldn't figure it out.

Also for the default value of each field, should I be using defaultValue={fields.name.defaultValue} or defaultValue={fields.name.initialValue}? What's the difference between the 2? I tried them both and still the returnd value is not being used, so the field is basically empty after a submission even if the server returned errors.

You can enter "John" as the name and any email in a valid format and hit submit. You will see the name gets the error message from the server but at the same time "John" is not persisted in the input.

https://codesandbox.io/p/sandbox/conform-fields-reset-v4c98x

If it's easy to check the code without opening the sandbox, I'll paste the code here as well.

// FormSetup.ts

"use client"

export default function FormSetup() {
  const [lastResult, formAction, isPending] = useActionState(action, null)
  const [form, fields] = useForm({
    lastResult,
    onValidate: ({ formData }) => parseWithZod(formData, { schema }),
    shouldValidate: "onSubmit",
    shouldRevalidate: "onInput",
  })

  return (
    <form
      id={form.id}
      onSubmit={form.onSubmit}
      action={formAction}
      noValidate
    >
      <div className="form-error">{form.errors}</div>

      <label>
        <div>Name</div>
        <input
          type="text"
          name={fields.name.name}
          defaultValue={fields.name.defaultValue}
        />
        <div>{fields.name.errors}</div>
      </label>

      <button>
        {isPending ? "Loading..." : "Submit"}
      </button>
    </form>
  )
}

// action.ts

"use server"

import { parseWithZod } from "@conform-to/zod/v4"

import { schema } from "@/lib/schemas"

export async function action(prev: unknown, formData: FormData) {
  await new Promise((resolve) => setTimeout(resolve, 2000))

  const submission = parseWithZod(formData, { schema: schema })

  if (submission.status !== "success") {
    return submission.reply()
  }

  if (submission.value.name === "John") {
    return submission.reply({
      fieldErrors: { name: ["Username already taken."] },
    })
  }

  console.log("Successful!")
  return submission.payload
}

[edmundhung]

Hi @DarkstarXDD,

Sorry for the confusion! This is indeed related to React 19 auto reset the form and the issue you see is caused by Conform resetting its state when a reset event is dispatched. You can find a workaround here.

This is also resolved in the future APIs and you can find an example in the repository. Hope this helps and thanks for giving Conform a try!

[DarkstarXDD]

@edmundhung Thanks a lot for the response. I'll check the future API.