-
breakind change: removed
callback
field, instead of thisuseDebouncedCallback
anduseThrottledCallback
returns a callable function:
Old:const { callback, pending } = useDebouncedCallback(/*...*/); // ... debounced.callback();
New:
const debounced = useDebouncedCallback(/*...*/); // ... debounced(); /** * Also debounced has fields: * { * cancel: () => void * flush: () => void * isPending: () => boolean * } * So you can call debounced.cancel(), debounced.flush(), debounced.isPending() */
It makes easier to understand which cancel \ flush or isPending is called in case you have several debounced functions in your component
-
breaking change: Now
useDebounce
,useDebouncedCallback
anduseThrottledCallback
hasisPending
method instead ofpending
Old:
const { callback, pending } = useDebouncedCallback(/*...*/);
New:
const { callback, isPending } = useDebouncedCallback(/*...*/); /** * { * callback: (...args: any[]) => ReturnType<T> * cancel: () => void * flush: () => void * isPending: () => boolean * } */
-
get rid of
useCallback
calls -
improve internal typing
-
decrease the amount of functions to initialize each
useDebouncedCallback
call -
reduce library size:
Whole library: from 946 B to 899 B === 47 B
useDebounce: from 844 to 791 === 53 B
useDebouncedCallback: from 680 to 623 === 57 B
useThrottledCallback: from 736 to 680 === 56 B