Preserving Form State Across Navigation in Inertia.js with useRemember

Useful answer

To keep a form’s input values and validation errors when the user leaves the page and returns later, wrap the form’s reactive data with Inertia’s useRemember composable (or the equivalent remember helper in React/Svelte). The remembered data lives in Inertia’s client‑side store keyed by the component name and the current URL, so navigating away and back restores the exact same state without a server round‑trip.

How the mechanism works

Inertia maintains an internal memory store for each page visit. The store entry is identified by a string that combines the page component’s name and the URL. By default, when a new page loads the previous entry is discarded. useRemember tells Inertia to retain the reactive object associated with that key instead of deleting it. On a subsequent visit that matches the same key, Inertia re‑hydrates the remembered object with the stored values.

Worked Vue 3 example

import { useRemember } from '@inertiajs/inertia-vue3/composables'

 export default {
   setup() {
     // remember preserves the form data across navigation
     const remembered = useRemember({
       name: '',
       email: '',
     })

     const form = useForm(remembered)

     const submit = () => {
       form.post(route('profile.update'), {
         onSuccess: () => form.reset(),
       })
     }

     return { form, submit }
   }
 }

The template binds to the form as usual:

<form @submit.prevent="submit">
  <input v-model="form.name" placeholder="Name" />
  <input v-model="form.email" type="email" placeholder="Email" />
  <span v-if="form.errors.name">{{ form.errors.name }}</span>
  <button type="submit">Save</button>
</form>

Limits and common mistakes

• Component name or URL changes – The store key depends on the exact component name (as registered in the page component) and the page URL. Renaming the component or navigating to a different route that renders a different component generates a new key, so the remembered state is lost.
• Memory growth – Each remembered object stays in the Inertia store until explicitly cleared. Long‑running SPAs with many remembered forms can consume noticeable memory. Call the reset function returned by useForm (or manually set the remembered ref to null) when the form is no longer needed.
• File inputs – File objects are not serializable and are lost on navigation. useRemember does not retain them; handle uploads with a separate FormData flow or store file references elsewhere.
• Large form objects – Re‑hydrating a huge nested object can cause a brief UI pause. Consider splitting the form into logical sub‑forms or lazy‑loading sections.
• Server‑side contract mismatch – The remembered client expects the same field names and error structure that the server returns. If the backend changes the shape of validation errors, the restored form.errors may be incomplete or cause errors.

Practical way to verify it works

1. Open the page with the form, fill in a few fields, and deliberately cause a validation error (e.g., leave a required field blank).
2. Navigate to another page within the same Inertia app.
3. Use the browser’s back button to return to the original page.
4. Check that the previously entered values are still present in the inputs and that the error messages re‑appear.
5. Submit the form successfully, then call form.reset(). Navigate away and back; the form should now be empty, confirming that the remembered state was cleared.
6. Open DevTools → Console and inspect window.inertia (if exposed) to see the stored entry keyed by <componentName>|<url>. Verify that the data and errors objects match what you saw on the form.