← Lessons

quiz vs the machine

Gold1320

Frontend

The URL as State

Store shareable, bookmarkable state like filters and tabs in the URL so it survives reloads and links.

4 min read · core · beat Gold to climb

The URL is state too

The address bar is a place to keep state. URL state lives in the path and query string, so it is shareable, bookmarkable, and survives a reload. Filters, the current tab, search terms, and page numbers are natural fits.

  • A link captures the exact view, so users can share it.
  • Reloading restores the same state because it is in the URL.
  • The back and forward buttons navigate state changes for free.

What belongs in the URL

Put state in the URL when another person or a future you should be able to land on the same view.

  • Good fits include search queries, active filters, sort order, and pagination.
  • Poor fits include secrets, large objects, and rapidly changing values.
  • Keep the encoding readable so links stay clean and debuggable.

Syncing without loops

The tricky part is keeping component state and the URL in agreement without an update loop. Read state from the URL as the source of truth and write changes back through navigation rather than holding a second copy.

Key idea

Store shareable, bookmarkable state such as filters and tabs in the URL so it survives reloads and links, treating the URL as the source of truth.

Check yourself

Answer to earn rating on the learn ladder.

1. Why store filters and tabs in the URL?

2. How do you avoid an update loop between URL and component state?