When should you use URL state instead of React state?

URL state (query params, path params) is the right choice whenever state should be:

• Shareable — a user can send a link and the recipient sees the same view. Filters, pagination, search terms, selected tabs.
• Bookmarkable — browser history works correctly; back button returns to previous filter state.
• Server-renderable — the server can pre-render the correct state without JS. Important for SEO (search results pages).
• Persistent across refresh — query params survive F5; React state does not.

// ✅ Filters in URL — shareable, bookmarkable
const [searchParams, setSearchParams] = useSearchParams();
const category = searchParams.get('category') ?? 'all';
const page = Number(searchParams.get('page')) || 1;

// ✅ UI-only state in React — modal open, tooltip hover
const [modalOpen, setModalOpen] = useState(false);

Avoid URL state for: ephemeral UI state (hover, focus, modal open), sensitive data, state that changes many times per second (animation progress).