Debouncing

[ShahriarKh]

First of all, thank you for creating this great library!💎

I want to use debouncing:

import { useQueryState } from 'next-usequerystate';
import { useDebouncedCallback } from 'use-debounce';

export default function Component() {
  const [searchQuery, setSearchQuery] = useQueryState('searchQuery', {
    history: 'replace',
  });

  const handleSearch = useDebouncedCallback((val) => {
    setSearchQuery(val, {
      shallow: false,
    });
  }, 1000);

  return (
    <input
     // value={searchQuery}
     onChange={(e) => handleSearch(e.target.value)}
    />
  )
}

This works as expected, but using value={searchQuery} breaks it. What am I doing wrong here?

(I read here #351 that there's an internal 50ms debounce, but I want to use a bigger number)

[ShahriarKh]

Well, seems like using defaultValue={searchQuery} is enough for syncing input value with url on page load/refresh.

[franky47]

You need to keep in mind that, because of the internal throttling, there are two update events.

1. The state (searchQuery here) is updated synchronously like a setState would for useState
2. At a later point in time (between "next tick" and 50ms), the URL will be updated to reflect the value from the state, in order to avoid rate limits set by browsers on the history API (more about it on my blog).

So it depends what you want to throttle. Since you're binding the state to a text input, I'd wager you want to keep the UI responsive and only throttle URL updates and requests sent to the server. Throttling the setSearchQuery will also throttle the internal state update, and make the UI unresponsive.

Ideally, the throttling value should be configurable instead of being hard-coded to 50ms. Though I'm not sure how this could be done with multiple queries with different throttle configurations, since there is only one timer in charge of flushing the update queue to the URL. If you have any ideas on that, I'm all ears.

[ShahriarKh]

Thank you for your detailed (and fast) response. I need to learn more about the topic and understand what's happening under the hood, but let's see what others think in the meanwhile...

[franky47]

I have published 1.9.0-beta.2 which has a draft of support for throttling URL updates with custom values. Could you give it a try and discuss on PR #374 please?

• Documentation
• Playground demo

[ShahriarKh]

Awesome. Added my comment there 👍🏽

[franky47]

Configurable throttling was introduced in version 1.10.0:

useQueryState('query', { throttleMs: 500 })