Stale Page Prevention
Conceptparamsync > concepts

Stale Page Prevention

Techniques for preventing orphaned pagination states when filter criteria are modified.

The Problem

A user browses to page 7 of an e-commerce catalog (?page=7). They then type a specific search keyword "mechanical keyboard" which only returns 3 products (1 single page of results). If the page state remains 7, the catalog displays a blank "No products found" error despite matching products existing on page 1.

The paramsync Solution

paramsync makes page index resets effortless. Because parseAsInteger.withDefault(1) purges page=1 from the URL under the Clean URL Policy, calling setPage(1) whenever filter criteria change resets internal state and keeps the URL completely clean.

Key Architectural Takeaways

  • Always reset page to 1 whenever search, categories, or price bounds change.
  • Under the Clean URL Policy, page=1 is automatically deleted from the URL.
  • Use useBatchQueryParams to reset page and apply multiple filters in a single atomic history tick.

Implementation Pattern

TSPattern.tsx
'use client';
 
import { useQueryState, parseAsString, parseAsInteger } from 'paramsync';
 
export function ProductCatalog() {
  const [search, setSearch] = useQueryState('q', parseAsString.withDefault(''));
  const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1));
 
  const handleFilterChange = (newSearchTerm: string) => {
    // Reset page back to 1 (automatically cleans ?page from URL)
    if (page > 1) {
      setPage(1);
    }
    setSearch(newSearchTerm);
  };
 
  return <input value={search} onChange={(e) => handleFilterChange(e.target.value)} />;
}
main|paramsync
TypeScript JSXLn 18, Col 1
;