Structuring URL state in React

Put durable intent in the URL

Search queries, filters, selected tabs, and pagination often belong in the URL because users expect to share, bookmark, and revisit them. Ephemeral state such as an open tooltip usually does not.

Parse at the boundary

Treat search parameters like any external input: parse them into a typed internal shape, apply defaults, and reject unsupported values. Components should consume the parsed state rather than each interpreting raw strings differently.

Update with restraint

Typing into search can replace the current history entry; committing a navigation-level filter may deserve a new entry. The distinction keeps the Back button aligned with user intent.

Keep server and client responsibilities clear

Server-rendered results can use URL state directly. Client-only filtering should initialize from the same contract so hydration does not change the visible result set unexpectedly.