magic-amber

Throttling-Debouncing

I'd love to see an example of throttling/debouncing a useQuery. I have some ideas, but feel like it can turn into a monstrosity

5 Replies

metropolitan-bronze•4y ago

What do you exactly want to throttle / debounce? The re-fetching that happens if the tab loses focus and then regains focus? Because I believe that that can simply be solved by setting the stale-time to anything higher than 0

magic-amberOP•4y ago

A search with heavy remote request

national-gold•4y ago

const [search, setSearch] = useState('')
const debouncedSearch = useDebounce(search, 500)

useQuery(['things', debouncedSearch], () => fetchThings(debouncedSearch))

const [search, setSearch] = useState('')
const debouncedSearch = useDebounce(search, 500)

useQuery(['things', debouncedSearch], () => fetchThings(debouncedSearch))

the trick is to debounce the value, not the function call.

magic-amberOP•4y ago

Or, more generally, "denounce the query key" 🙂 Got it!

national-gold•4y ago

yep, exactly if you want to contribute this to the docs, maybe in a new recipes page, I think that would be good

Gaming

Programming

Throttling-Debouncing

Did you find this page helpful?