Instead of debouncing the fetch function directly, you should debounce the query parameters (e.g., the search value) so that the queryKey changes only after a delay. This way useQuery is called only when the input has stabilized, not on every keystroke.

1. Create a useDebounce Hook

This hook will delay the value and only set the debounced value after the specified delay:

function useDebounce(value, delay) {  const [debouncedValue, setDebouncedValue] = useState(value);  useEffect(() => {

    const handler = setTimeout(() => setDebouncedValue(value), delay);

    return () => clearTimeout(handler);

  }, [value, delay]);

  return debouncedValue;

}

2. Use Debounced Value in Your Query Component

Now use useDebounce with useQuery like this:

const debouncedSearch = useDebounce(search, 500);

const { data, isLoading, isError } = useQuery({

  queryKey: [‘todos’, page, debouncedSearch],

  queryFn: () => fetch(`/api/todos?page=${page}&q=${debouncedSearch}`)

               .then(res => res.json()),

  enabled: !!debouncedSearch,

});

This way the query will only run after the debounced value changes

Also Read: How Much Does It Cost to Hire Remote React Developers?

Why This Works

  • Debouncing the queryKey instead of the query function matches React Query’s caching and lifecycle logic.
  • useQuery will only trigger when debouncedSearch changes, not on every keystroke.
  • You still get all the benefits of caching, isLoading, isError and other React Query states