hooks use-debounce.ts

0% Statements 0/12

0% Branches 0/3

0% Functions 0/3

0% Lines 0/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  /* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useRef, useEffect, useCallback } from "react";
import { useIsMounted } from "./use-is-mounted";
import debounce from "lodash/debounce";
 
export const useDebounce = <T extends (...args: Array<any>) => any>(
  cb: T,
  delay: number
) => {
  const inputsRef = useRef({ cb, delay });
  const isMounted = useIsMounted();
  useEffect(() => {
    inputsRef.current = { cb, delay };
  });
  return useCallback(
    debounce((...args: Parameters<T>) => {
      // Debounce is an async callback. Cancel it, if in the meanwhile
      // (1) component has been unmounted (see isMounted in snippet)
      // (2) delay has changed
      Iif (inputsRef.current.delay === delay && isMounted()) {
        inputsRef.current.cb(...args);
      }
    }, delay),
    [delay, debounce]
  );
};