Zero typing lag, automated Clean URL parameter purging, and atomic batch transitions engineered specifically for modern Next.js App Router applications.
Eliminates typing stutter, hydration desynchronization, and cluttered URLs with three core architectural pillars.
Controlled inputs update local React state instantaneously with zero typing lag, while browser URL synchronization is debounced asynchronously in the background.
Default values, empty strings "", and empty arrays [] are automatically purged from the query string, preserving canonical SEO links.
Filter drawers and slide-overs commit updates across 10+ query parameters in a single, unified Next.js navigation transition without history bloat.
Works like useState, but seamlessly bound to URL query state.
'use client'; import { useQueryState, parseAsString, parseAsArray, parseAsInteger } from 'paramsync'; export function CatalogFilters() { // 1. Debounced live search with 0ms input feedback const [search, setSearch] = useQueryState('q', parseAsString.withDefault(''), { debounceMs: 300, }); // 2. Type-safe array of categories (omitted from URL when empty) const [categories, setCategories] = useQueryState( 'categories', parseAsArray(parseAsString) ); // 3. Auto-cleans from URL when equal to default 1 const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1)); return ( <div className="space-y-4"> <input type="text" value={search} onChange={(e) => { setPage(1); // Auto-reset page on search setSearch(e.target.value); }} placeholder="Filter catalog..." /> </div> );}Standard Next.js useSearchParams() is low-level and read-only. paramsync solves all modern URL state challenges out-of-the-box.