state/url-state

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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