Sync React Form State to the URL Query String with a Debounced useSearchParams Hook

import { useCallback, useEffect, useRef, useState } from 'react';
import { useUrlState } from './useUrlState';

export function useDebouncedUrlState(delay = 350) {
  const [committed, setCommitted] = useUrlState();
  const [draft, setDraft] = useState(committed);
  const timer = useRef(null);

  useEffect(() => {
    return () => {
      if (timer.current) clearTimeout(timer.current);
    };
  }, []);

  const set = useCallback((patch) => {
    setDraft((prev) => {
      const next = { ...prev, ...patch };
      if (timer.current) clearTimeout(timer.current);
      timer.current = setTimeout(() => setCommitted(next), delay);
      return next;
    });
  }, [delay, setCommitted]);

  const commit = useCallback((patch = {}, options) => {
    if (timer.current) clearTimeout(timer.current);
    setDraft((prev) => {
      const next = { ...prev, ...patch };
      setCommitted(next, options);
      return next;
    });
  }, [setCommitted]);

  const flush = useCallback((options) => commit({}, options), [commit]);

  return { draft, committed, set, commit, flush };
}

import React from 'react';
import { useDebouncedUrlState } from './useDebouncedUrlState';

export default function ProductFilters({ onChange }) {
  const { draft, committed, set, commit, flush } = useDebouncedUrlState();

  React.useEffect(() => {
    onChange && onChange(committed);
  }, [committed, onChange]);

  const handleSubmit = (event) => {
    event.preventDefault();
    flush({ push: true });
  };

  return (
    <form className="product-filters" onSubmit={handleSubmit}>
      <input
        type="search"
        name="q"
        placeholder="Search products"
        value={draft.q || ''}
        onChange={(e) => set({ q: e.target.value })}
      />

      <select
        name="category"
        value={draft.category || ''}
        onChange={(e) => commit({ category: e.target.value })}
      >
        <option value="">All categories</option>
        <option value="books">Books</option>
        <option value="audio">Audio</option>
      </select>

      <select
        name="sort"
        value={draft.sort || 'relevance'}
        onChange={(e) => commit({ sort: e.target.value })}
      >
        <option value="relevance">Relevance</option>
        <option value="price_asc">Price: low to high</option>
        <option value="price_desc">Price: high to low</option>
      </select>

      <button type="submit">Apply</button>
    </form>
  );
}