Debouncing - UseQueryState has updated before it is set in the URL?

[cpotey]

I have a search component, I am storing the value to the URL - but I wanted to debounce it (saw this issue, which was basically similar to what I was after), and noticed throttleMs
So every 3000Ms, the searchQuery will be added to the URL (as far as I understand), and it seems to work correctly.

const Search = () => {
  const [searchQuery, setSearchQuery] = useQueryState('q', { defaultValue: '', throttleMs: 3000 });

  return (
    <div className={styles.search}>
        <Input
          type="text"
          name="search"
          iconAfter={<SearchIcon />}
          value={searchQuery || ''}
          onChange={(e) => setSearchQuery(e.target.value || null)}
        />
    </div>
  );
};

I am then in another component looking at the q search params, like so:

const ResourceGrid = () => {
  const [search, setSearchQuery] = useQueryState('q');

  const { data, isLoading } = useQuery({
    queryKey: [`resourceGrid`, { search: search }],
    queryFn: (): Promise<string> =>
      fetch(`https://jsonplaceholder.typicode.com/posts`).then((response) => response.json()),
  });

  return (
    <div>
      <p>searchQuery: {search}</p>
    </div>
  );
};

However, the search is updated everytime I type into the Input of the Search component, causing my fetch request to happen instantly (rather than debounced by 3000Ms). It doesn't seem to be adhering to the throttle set in the <Search /> - it is happening instantly.

Is this correct, or a bug, as I might need to find another way of debouncing this input if this is the case.

[tordans]

@cpotey AFAIK the debounce only changes how often the URL is updated. The internal state is updated like useState or Zustand would be. I wrote some notes on the mental model in #408

[franky47]

That is correct.

@cpotey if you want to debounce the read-only query state to feed to TanStack Query for data fetching, you can do so using a dedicated hook:

const ResourceGrid = () => {
  const [searchState] = useQueryState('q');
  const search = useDebounce(searchState, 3000)

  const { data, isLoading } = useQuery({
    queryKey: [`resourceGrid`, { search: search }],
    queryFn: (): Promise<string> =>
      fetch(`https://jsonplaceholder.typicode.com/posts`).then((response) => response.json()),
  });

  return (
    <div>
      <p>searchQuery: {search}</p>
    </div>
  );
};

[cpotey]

Thank you both for the response, very much appreciate the help!