How to reset the form default values to loader data after successful submission?

[hauptrolle]

How do I reset the form default values to the new default values from the loader after a successful form submission?

Example:

export const basicSettingsSchema = z.object({
  displayName: z.string({ required_error: "A Display Name is required" }),
  description: z.string().optional(),
});

export async function loader({}: LoaderFunctionArgs) {
  return json({
    description: `Description ${Date.now()}`,
  });
}


export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const submission = parse(formData, { schema: basicSettingsSchema });

  if (!submission.value) {
    return json(submission.reject());
  }

  return submission.accept({ resetForm: true });
}


export default function Index() {
  const lastResult = useActionData<typeof action>();
  const loaderData = useLoaderData<typeof loader>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";

  const { form, fields, context } = useForm({
    lastResult,
    onValidate({ formData }) {
      return parse(formData, { schema: basicSettingsSchema });
    },
    shouldRevalidate: "onInput",
    shouldValidate: "onBlur",
    defaultValue: {
      ...loaderData,
    },
  });

  return (
    <div className="p-8">
      <FormProvider context={context}>
        <Form
          className="space-y-6 max-w-xl"
          method="POST"
          replace={true}
          {...conform.form(form)}
        >
          <Textfield
            label="Display name"
            formId={form.id}
            name={fields.displayName.name}
            disabled={isSubmitting}
          />
          <Textfield
            label="Description"
            formId={form.id}
            name={fields.description.name}
            disabled={isSubmitting}
          />
          <button
            className="bg-slate-900 relative hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 text-white text-sm font-semibold h-10 px-6 rounded-md flex items-center justify-center"
            type="submit"
            disabled={isSubmitting}
          >
            Submit
          </button>
        </Form>
      </FormProvider>
    </div>
  );
}

Just passing the new default values into `useForm` does nothing. Also adding a key with the loaderData to the form/input does nothing. Any Ideas?

[hauptrolle]

I have found a similar issue: #129

Do I really have to check for equality in a useEffect and reset the form like this?

useEffect(() => {
    if (JSON.stringify(loaderData) !== JSON.stringify(form.initialValue)) {
      formRef.current?.reset();
    }
  }, [loaderData, form.initialValue]);

[edmundhung]

You can reset the form by marking payload on the submission as null like this:

export let action = async ({ request }: ActionArgs) => {
    const formData = await request.formData();
    const submission = parse(formData, { schema });

    if (submission.intent !== 'submit' || !submission.value) {
        return json(submission);
    }

    return json({
        ...submission,
        // Notify the client to reset the form using `null`
        payload: null,
    });
};

export default function Component() {
    const lastSubmission = useActionData<typeof action>();
    const [form, { message }] = useForm({
        // The last submission should be updated regardless the submission is successful or not
        // If the submission payload is empty:
        // 1. the form will be reset automatically
        // 2. the default value of the form will also be reset if the document is reloaded (e.g. nojs)
        lastSubmission,
    })

    // ...
}

But you are still required to reset the form manually in case of normal navigation. For example, if you were editing article a (e.g. /articles/a ) and you click on a link to edit article b (e.g. /articles/b) instead.