← Lessons

quiz vs the machine

Gold1390

Frontend

Query Params State

Store filters, search, and pagination in the URL query string instead of memory.

5 min read · core · beat Gold to climb

What it is

The query string after the question mark holds key value pairs that modify a view without changing which route matched. It is ideal for filters, sort order, search terms, and pagination.

Why the URL

  • The state becomes shareable and bookmarkable.
  • The back button moves between filter states naturally.
  • A refresh restores the same list rather than resetting it.

Reading and writing

The router parses the query into an object the view reads. Updating a filter writes a new query string, which the router treats as navigation. Decide whether each change should push a new history entry or replace the current one.

A pitfall

Rapid changes like typing in a search box can spam history. Use replace while typing and only push on a meaningful action, or debounce the updates.

Why it matters

Putting transient view state in the query keeps a single source of truth and gives users free sharing and history for free.

Key idea

The query string holds shareable view state like filters and pages, with care to push or replace history appropriately.

Check yourself

Answer to earn rating on the learn ladder.

1. Why store filters in the query string?

2. While the user types in a search box you should usually