URL as Source of Truth for Filters

Filter, sort, pagination, and search state is "UI state that users expect to be bookmarkable and shareable." Storing it in component state is a UX failure — it's ephemeral, doesn't survive refresh, and can't be linked to. The URL querystring is the natural, persistent store for this state.

In React with React Router v6:

import { useSearchParams } from 'react-router-dom';

function ProductFilters() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category') || 'all';

  return (
    <select
      value={category}
      onChange={(e) => setSearchParams(prev => {
        prev.set('category', e.target.value);
        return prev;
      })}
    >
      {/* options */}
    </select>
  );
}

useSearchParams is the React Router native hook for URL query params — it handles the synchronization between URL and state automatically.

The implementation used useState for all four filter values. No URL sync, no serialization, no history.pushState. When Sarah copied the URL, she copied /customers — a URL that carries no filter information whatsoever. When James opened it, the component initialized with default state. When Sarah refreshed, the component re-mounted with default state. Four filters, four state values, zero persistence.

The migration was mechanical. Each useState filter was replaced with a read from URLSearchParams and writes through history.pushState. A popstate listener keeps the UI in sync when the user navigates back/forward. In React Router v6, useSearchParams does this in one hook:

// Before (component state — not shareable)
const [status, setStatus] = useState('active');
const [region, setRegion] = useState('all');

// After (URL state — shareable, bookmarkable, refresh-safe)
const [searchParams, setSearchParams] = useSearchParams();
const status = searchParams.get('status') ?? 'active';
const region = searchParams.get('region') ?? 'all';

const setFilter = (key, value) =>
  setSearchParams(prev => { prev.set(key, value); return prev; });

Notice the URL bar in fixed mode as you click filters. Each filter change updates the querystring. Browser back/forward restores the previous filter state.

React Router v6 and Next.js patterns:

// React Router v6 — useSearchParams
import { useSearchParams } from 'react-router-dom';

function Filters() {
  const [params, setParams] = useSearchParams();
  const status = params.get('status') ?? 'all';

  // Merge update (preserve other params)
  const update = (key, val) =>
    setParams(p => { p.set(key, val); return p; });

  return <select value={status} onChange={e => update('status', e.target.value)}>...</select>;
}

// Next.js App Router — useRouter + useSearchParams
import { useRouter, useSearchParams } from 'next/navigation';

function Filters() {
  const router = useRouter();
  const params = useSearchParams();

  const update = (key, val) => {
    const next = new URLSearchParams(params.toString());
    next.set(key, val);
    router.push(`?${next.toString()}`);
  };
}

Implementation notes:

• Always merge into existing params (prev.set(key, val)) — never replace the whole querystring, or other filters get wiped
• Use replace instead of push for ephemeral state like page number — keeps history clean
• Serialize arrays as repeated params: tag=a&tag=b, read with params.getAll('tag')
• Skip URL sync for truly ephemeral UI: dropdown open/closed, hover state, tooltip visibility — these don't need to survive refresh