state/url-state

Why

Filters and pagination kept in component or store state are lost on reload, cannot be shared as a link, and the Back button leaves the page instead of undoing the last filter. Server rendering also cannot see them, so the first paint shows the unfiltered list.

Fix

Read these values from the search params (useSearchParams, page.url.searchParams, useRoute().query, ActivatedRoute.queryParamMap) and change them by navigating (router.replace for typing, push for deliberate steps). Keep throwaway UI state (an open menu, hover) in component state.

Examples

// bad
const [sort, setSort] = useState('price')
// good
const params = useSearchParams()
const sort = params.get('sort') ?? 'price'

Sources

• SvelteKit docs, State management (storing state in the URL)
• Next.js docs, useSearchParams

Read it in the terminal

npx github:dawidolko/frontend-skills explain state/url-state