Reload data in Form after submission using Remix

I am using the Remix Form element to render my form containing various input fields. If there is a server-side validation error the text entered in the fields remains, which is as expected. However, when the form is successfully submitted I would like all the fields to refresh using the latest saved data from the db, which does not happen as they still contain what was previously entered.

A related issue is that when the form is submitted, contains password fields, and has validation issues, I would like those fields to be cleared similarly to what the standard form element does.

Is there a way of achieving this, or am I better off switching to form? I've also tried adding reloadDocument without any luck.

If I successfully submit this form, I would expect that the loader would be invoked again, producing an updated 10 char value. The actionData map would be null and so the input would display the abbreviated updated value. Instead, it displays the non-abbreviated value i.e. what the user entered and I have to navigate away and come back for it to properly pick it up.

Code:

export async function loader({ request }: LoaderArgs) {
  const value = await getValue();
  return {
    value: value.substring(0, 10)
  }
}

export async function action({ request }: ActionArgs) {
  const formData = await request.formData()
  const newValue = formData.get("newValue")

  if (isValid(newValue)) {
    return redirect("/update-value") // same page as we are already on
  }

  return {
    errors: {
      newValue: true
    },
    values: {
      newValue
    }
  }
}

export default function Page() {
  const loaderData = useLoaderData<typeof loader>()
  const actionData = useActionData<typeof action>()

  return (
    <Form method="POST">
      <input type="text" name="newValue" id="newValue" defaultValue={actionData?.errors.newValue ? actionData?.values.newValue : loaderData.value} />
      <button type="submit"/>
    </Form>
  )
}

The issue you're having is due to how React works. When Remix fetches data, either through navigation, form post, or revalidation, it simply updates its internal context with the returned data, and that triggers a re-render.

Remix does not unmount components on navigation, including <Outlet>. React handles that. Since you are redirecting to the same page, React is simply re-rendering the same components with the updated data.

The issue is that React will not update the defaultValue prop on form inputs or the initial state in useState. To get React to use the new value, you must tell React you want to unmount and remount the component with the latest data.

Typically you control this with the key prop. For example:

const location = useLocation()
return <Form key={location.key}>...</Form>

location.key will generate a unique key on each render, so this will ensure the component is unmounted when you redirect.

>NOTE: since location.key updates on re-render, this will cause the form to remount on every re-render, not just navigation. This will also cause focus to be lost, so be aware of that.

Ideally, you would use a more stable key that only changes when the loader changes. This could be the actual URL: location.pathname. Since you're redirecting to the same route, you could return a timestamp from your loader and use that as a key.

Usually, this isn't too much of an issue if you redirect to a different route where the component tree differs from your original. Only when the trees are the same, do you have to deal with how React works. I hope this helps clarify things.