Support for throttling and debouncing when performing api call

[VineetKumarKushwaha]

I am wondering if we can have in-built support for throttling and denounce from the library. I have come across multiple cases where I needed it.

• Search
• Sorting

[TkDodo]

Both cases you are mentioning probably should have that information as part of the query key, which means in local state. There are good hooks for both throttling: https://github.com/jaredLunde/react-hook/tree/master/packages/throttle#readme and debouncing: https://usehooks.com/useDebounce/

[linuz90]

I'm also really interested in this. I implemented rudimentary throttling myself using the use-debounce library, but for example if a component unmount during a throttled mutation, the mutation just cancels, so it's suboptimal.

Any pointers on how to do better throttling would be appreciated.

[schulzf]

+1

I'm implementing auto-save on mutations, (calling the mutation when user types), would be nice if one could pass throttle options directly to the hook instead of having to wrap it in a custom throttling logic.

ideally one would pass the settings to the hook like so useMutation({ throttle?: { delay?: number , leading?: boolean, trailing?: boolean }), and have the option to set throttle to false on the method ex mutate({ ...args }, { throttle: false }) to allow bypassing the setting (eg: for when the user manually saves)

[adelpro]

For debounce, i suggest the React build-in hook: useDeferredValue
Showing stale content while fresh content is loading
Call useDeferredValue at the top level of your component to defer updating some part of your UI. Readmore

[andriy-shymkiv]

yes, but it won't help in cases where you need to explicitly wait some time before executing the next query

[jonath92]

That would also be useful when using tanstack query outside of react e.g. for Angular.