Use nuqs for type-safe URL-synced state in React

Storing component state in the URL makes it bookmarkable and sharable.
But manually reading and writing searchParams can get ugly—and fragile.

Enter nuqs: a tiny (~5.5 kB gzipped) React hook that works like useState, but syncs state with the URL—fully type-safe and framework-agnostic.

import { parseAsInteger, useQueryState } from 'nuqs';
 
function Counter() {
  const [count, setCount] = useQueryState(
    'count',
    parseAsInteger.withDefault(0)
  );
  return (
    <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
  );
}

Why it's a win:

• Type-safe parsing: converts query strings into numbers, booleans, dates, enums, and more.
• Batched, throttled updates: nudges the URL without overloading History API (no crashes from too-many updates).
• Cross-framework support: works with Next.js (both routers), Remix, React Router, TanStack Router, and plain React out-of-the-box.

It also provides helpers like useQueryStates for managing multiple params together, and a server-side cache (createSearchParamsCache) for SSR-friendly workflows.

Use nuqs when:

• You want state synced to URL in a type-safe, shareable way.
• You need multiple frameworks or SSR support.
• You'd love less boilerplate, safer parsing, and smoother URL handling.

Learn more about nuqs.