React Native: How to implement a custom hook for debouncing in React Native?

1import { useState, useEffect } from "react";
2
3function useDebounce<T>(value: T, delay: number): T {
4  const [debouncedValue, setDebouncedValue] = useState(value);
5
6  useEffect(() => {
7    const handler = setTimeout(() => {
8      setDebouncedValue(value);
9    }, delay);
10
11    return () => clearTimeout(handler);
12  }, [value, delay]);
13
14  return debouncedValue;
15}
16
17// Usage
18function SearchInput() {
19  const [query, setQuery] = useState("");
20  const debouncedQuery = useDebounce(query, 500);
21
22  useEffect(() => {
23    if (debouncedQuery) {
24      performSearch(debouncedQuery);
25    }
26  }, [debouncedQuery]);
27
28  return <TextInput value={query} onChangeText={setQuery} />;
29}

1function useDebouncedCallback(callback: Function, delay: number) {
2  const timeoutRef = useRef<NodeJS.Timeout>();
3
4  return useCallback((...args) => {
5    clearTimeout(timeoutRef.current);
6    timeoutRef.current = setTimeout(() => {
7      callback(...args);
8    }, delay);
9  }, [callback, delay]);
10}