Building Fast Multi-Faceted Product Filters with React and URL State

The Problem with Local Component State in Filters

When building online stores, developers often store filter choices like category, price range, and color inside React's local useState hook. While this works initially, it creates poor user experiences. When a user reloads the page, shares the URL with a friend, or clicks the browser back button, all their filter choices disappear because the URL did not change.

In projects like [Shopease / Oud & Attar](/projects/2), keeping URL search parameters in sync with filter selections solved this issue entirely. Users can bookmark exact search criteria or share URLs that open the catalog with the exact same filters applied.

Writing a Clean URL State Sync Hook in React

To synchronize filter state with the URL without causing unnecessary re-renders or sluggish page navigation, we can use React Router's useSearchParams hook or native browser APIs. Here is a production-tested pattern for managing multi-faceted filters cleanly.

import { useSearchParams } from 'react-router-dom';
import { useCallback } from 'react';

interface FilterState {
  category: string;
  minPrice: number;
  maxPrice: number;
  inStock: boolean;
}

export function useProductFilters() {
  const [searchParams, setSearchParams] = useSearchParams();

  const filters: FilterState = {
    category: searchParams.get('category') || 'all',
    minPrice: Number(searchParams.get('minPrice')) || 0,
    maxPrice: Number(searchParams.get('maxPrice')) || 10000,
    inStock: searchParams.get('inStock') === 'true',
  };

  const setFilter = useCallback(
    (key: keyof FilterState, value: string | number | boolean) => {
      const newParams = new URLSearchParams(searchParams);
      if (value === 'all' || value === 0 || value === false) {
        newParams.delete(key);
      } else {
        newParams.set(key, String(value));
      }
      setSearchParams(newParams, { replace: true });
    },
    [searchParams, setSearchParams]
  );

  return { filters, setFilter };
}

Best Practices for Fast Product Filtering

To keep product filtering snappy and responsive, follow these practical guidelines during development:

• Debounce text search inputs by 300ms to avoid filtering arrays on every single keystroke.
• Memoize heavy filter and sort operations using useMemo to prevent unnecessary calculations on unrelated re-renders.
• Keep filter option counts updated dynamically so users do not click filters that yield zero results.
• Design mobile filter panels to slide out cleanly without blocking the main thread.

Need Help Implementing This in Your Product?

As an independent web developer, I build fast, production-ready web applications, e-commerce stores, and custom software. Explore my [Full-Stack Web Development Services](/services) or [get in touch with Aafaque](/contact) to discuss your project.