React: How to implement debouncing and throttling in React?

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 timer = setTimeout(() => setDebouncedValue(value), delay);
8    return () => clearTimeout(timer);
9  }, [value, delay]);
10
11  return debouncedValue;
12}
13
14// Usage
15function SearchInput() {
16  const [query, setQuery] = useState("");
17  const debouncedQuery = useDebounce(query, 500);
18
19  useEffect(() => {
20    if (debouncedQuery) {
21      search(debouncedQuery);
22    }
23  }, [debouncedQuery]);
24
25  return <input value={query} onChange={e => setQuery(e.target.value)} />;
26}

1function useThrottle<T>(value: T, limit: number): T {
2  const [throttledValue, setThrottledValue] = useState(value);
3  const lastRun = useRef(Date.now());
4
5  useEffect(() => {
6    const handler = setTimeout(() => {
7      if (Date.now() - lastRun.current >= limit) {
8        setThrottledValue(value);
9        lastRun.current = Date.now();
10      }
11    }, limit - (Date.now() - lastRun.current));
12
13    return () => clearTimeout(handler);
14  }, [value, limit]);
15
16  return throttledValue;
17}
18
19// Usage
20function ScrollTracker() {
21  const [scrollY, setScrollY] = useState(0);
22  const throttledScrollY = useThrottle(scrollY, 100);
23
24  useEffect(() => {
25    const handleScroll = () => setScrollY(window.scrollY);
26    window.addEventListener("scroll", handleScroll);
27    return () => window.removeEventListener("scroll", handleScroll);
28  }, []);
29
30  return <div>Scroll: {throttledScrollY}px</div>;
31}