A hook for updating URL search parameters using window.history.pushState or window.history.replaceState instead of the Next.js router. This means URL updates happen entirely on the client side without triggering a server-side re-render.
This is useful for scenarios where you want to:
- Update the URL without triggering a full page re-render
- Maintain client-side state in the URL (e.g., filters, search queries)
- Keep the URL in sync with client-side state without server involvement
You should wrap the component that uses this hook with a Suspense.
Reading search parameters through useSearchParams() without a Suspense boundary will opt the entire page into client-side rendering. This could cause your page to be blank until the client-side JavaScript has loaded. Learn more
Installation
Usage
Basic Usage
const [value, setValue] = useSearchParamShallow("name");
With history replace
const [value, setValue] = useSearchParamShallow("name", { history: "replace", });