Function useDebouncedCallback

src/useDebouncedCallback.ts:121–330

(
  func: T,
  wait?: number,
  options?: Options,
  forceUpdate?: Dispatch<SetStateAction<object>>
)

 * const status = debounced.isPending() ? "Pending..." : "Ready"
 */
export default function useDebouncedCallback<
  T extends (...args: any) => ReturnType<T>,
>(
  func: T,
  wait?: number,
  options?: Options,
  forceUpdate?: Dispatch<SetStateAction<object>>
): DebouncedState<T> {
  const lastCallTime = useRef(null);
  const lastInvokeTime = useRef(0);
  const firstInvokeTime = useRef(0);
  const timerId = useRef(null);
  const lastArgs = useRef<unknown[]>([]);
  const lastThis = useRef<unknown>();
  const result = useRef<ReturnType<T>>();
  const funcRef = useRef(func);
  const mounted = useRef(true);
  // Always keep the latest version of debounce callback, with no wait time.
  funcRef.current = func;

  const isClientSide = typeof window !== 'undefined';
  // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
  const useRAF = !wait && wait !== 0 && isClientSide;

  if (typeof func !== 'function') {
    throw new TypeError('Expected a function');
  }

  wait = +wait || 0;
  options = options || {};

  const leading = !!options.leading;
  const trailing = 'trailing' in options ? !!options.trailing : true; // `true` by default
  const maxing = 'maxWait' in options;
  const debounceOnServer =
    'debounceOnServer' in options ? !!options.debounceOnServer : false; // `false` by default
  const maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : null;

  useEffect(() => {
    mounted.current = true;
    return () => {
      mounted.current = false;
    };
  }, []);

  // You may have a question, why we have so many code under the useMemo definition.
  //
  // This was made as we want to escape from useCallback hell and
  // not to initialize a number of functions each time useDebouncedCallback is called.
  //
  // It means that we have less garbage for our GC calls which improves performance.
  // Also, it makes this library smaller.
  //
  // And the last reason, that the code without lots of useCallback with deps is easier to read.
  // You have only one place for that.
  const debounced = useMemo(() => {
    const invokeFunc = (time: number) => {
      const args = lastArgs.current;