Remembering State

Persist client state across visits and browser history.

See also

Official Inertia.js docs: Remembering State

What Is Remembering State?

Remembered state lets your components persist data (filters, form drafts, expanded panels) when the user navigates away and comes back.

useRemember Hook

import { useRemember } from "@inertiajs/react";

export default function Users() {
  const [filters, setFilters] = useRemember(
    { search: "", role: "all" },
    "users:filters"
  );

  return <Filters value={filters} onChange={setFilters} />;
}

<script setup lang="ts">
import { useRemember } from "@inertiajs/vue3";

const filters = useRemember({ search: "", role: "all" }, "users:filters");
</script>

<template>
  <Filters :value="filters" @change="(next) => (filters.value = next)" />
</template>

Remembered Forms

The Inertia form helpers accept a remember key:

import { useForm } from "@inertiajs/react";

const form = useForm("profile", {
  name: "",
  email: "",
});

<script setup lang="ts">
import { useForm } from "@inertiajs/vue3";

const form = useForm("profile", {
  name: "",
  email: "",
});
</script>

Manual Remember/Restore

You can also remember arbitrary values manually:

import { router } from "@inertiajs/react";

router.remember({ tab: "billing" }, "settings:tab");
const restored = router.restore("settings:tab");

import { router } from "@inertiajs/vue3";

router.remember({ tab: "billing" }, "settings:tab");
const restored = router.restore("settings:tab");

Backend Considerations

No server changes are required. Remembered state is stored client-side.

See Also