React Hooks: кастомные хуки для реальных задач

1function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {
2  const [storedValue, setStoredValue] = useState<T>(() => {
3    try {
4      const item = window.localStorage.getItem(key);
5      return item ? JSON.parse(item) : initialValue;
6    } catch (error) {
7      return initialValue;
8    }
9  });
10
11  const setValue = (value: T | ((val: T) => T)) => {
12    try {
13      const valueToStore = value instanceof Function ? value(storedValue) : value;
14      setStoredValue(valueToStore);
15      window.localStorage.setItem(key, JSON.stringify(valueToStore));
16    } catch (error) {
17      console.error(error);
18    }
19  };
20
21  return [storedValue, setValue];
22}

1function Settings() {
2  const [theme, setTheme] = useLocalStorage('theme', 'light');
3  return (
4    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
5      Тема: {theme}
6    </button>
7  );
8}

1function useDebounce<T>(value: T, delay: number): T {
2  const [debouncedValue, setDebouncedValue] = useState<T>(value);
3
4  useEffect(() => {
5    const handler = setTimeout(() => {
6      setDebouncedValue(value);
7    }, delay);
8
9    return () => clearTimeout(handler);
10  }, [value, delay]);
11
12  return debouncedValue;
13}

1function Search() {
2  const [query, setQuery] = useState('');
3  const debouncedQuery = useDebounce(query, 300);
4
5  useEffect(() => {
6    if (debouncedQuery) {
7      search(debouncedQuery);
8    }
9  }, [debouncedQuery]);
10
11  return <input value={query} onChange={e => setQuery(e.target.value)} />;
12}

1function useFetch<T>(url: string) {
2  const [data, setData] = useState<T | null>(null);
3  const [loading, setLoading] = useState(true);
4  const [error, setError] = useState<Error | null>(null);
5
6  useEffect(() => {
7    const controller = new AbortController();
8
9    const fetchData = async () => {
10      try {
11        setLoading(true);
12        const response = await fetch(url, { signal: controller.signal });
13        if (!response.ok) throw new Error('Network error');
14        const json = await response.json();
15        setData(json);
16      } catch (err) {
17        if (err instanceof Error && err.name !== 'AbortError') {
18          setError(err);
19        }
20      } finally {
21        setLoading(false);
22      }
23    };
24
25    fetchData();
26    return () => controller.abort();
27  }, [url]);
28
29  return { data, loading, error };
30}

1function UserProfile({ userId }) {
2  const { data: user, loading, error } = useFetch(`/api/users/${userId}`);
3
4  if (loading) return <Spinner />;
5  if (error) return <Error message={error.message} />;
6  return <div>{user.name}</div>;
7}

1function useIntersectionObserver(
2  ref: RefObject<Element>,
3  options?: IntersectionObserverInit
4): boolean {
5  const [isIntersecting, setIsIntersecting] = useState(false);
6
7  useEffect(() => {
8    const element = ref.current;
9    if (!element) return;
10
11    const observer = new IntersectionObserver(
12      ([entry]) => setIsIntersecting(entry.isIntersecting),
13      options
14    );
15
16    observer.observe(element);
17    return () => observer.disconnect();
18  }, [ref, options]);
19
20  return isIntersecting;
21}

1function LazyImage({ src, alt }) {
2  const ref = useRef<HTMLDivElement>(null);
3  const isVisible = useIntersectionObserver(ref, { rootMargin: '100px' });
4
5  return (
6    <div ref={ref}>
7      {isVisible && <img src={src} alt={alt} />}
8    </div>
9  );
10}

1function useMediaQuery(query: string): boolean {
2  const [matches, setMatches] = useState(false);
3
4  useEffect(() => {
5    const media = window.matchMedia(query);
6    setMatches(media.matches);
7
8    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
9    media.addEventListener('change', listener);
10    return () => media.removeEventListener('change', listener);
11  }, [query]);
12
13  return matches;
14}

1function ResponsiveLayout() {
2  const isMobile = useMediaQuery('(max-width: 768px)');
3  return isMobile ? <MobileLayout /> : <DesktopLayout />;
4}

1function useToggle(initialValue = false): [boolean, () => void, (value: boolean) => void] {
2  const [value, setValue] = useState(initialValue);
3  const toggle = useCallback(() => setValue(v => !v), []);
4  return [value, toggle, setValue];
5}

1function Modal() {
2  const [isOpen, toggleOpen] = useToggle(false);
3  return (
4    <>
5      <button onClick={toggleOpen}>Открыть</button>
6      {isOpen && <Modal onClose={toggleOpen} />}
7    </>
8  );
9}

1function usePrevious<T>(value: T): T | undefined {
2  const ref = useRef<T>();
3
4  useEffect(() => {
5    ref.current = value;
6  }, [value]);
7
8  return ref.current;
9}

1function Counter() {
2  const [count, setCount] = useState(0);
3  const prevCount = usePrevious(count);
4
5  return (
6    <div>
7      <p>Сейчас: {count}, Было: {prevCount}</p>
8      <button onClick={() => setCount(c => c + 1)}>+</button>
9    </div>
10  );
11}

1function useWindowSize() {
2  const [size, setSize] = useState({
3    width: window.innerWidth,
4    height: window.innerHeight,
5  });
6
7  useEffect(() => {
8    const handleResize = () => {
9      setSize({ width: window.innerWidth, height: window.innerHeight });
10    };
11
12    window.addEventListener('resize', handleResize);
13    return () => window.removeEventListener('resize', handleResize);
14  }, []);
15
16  return size;
17}

1import { renderHook, act } from '@testing-library/react';
2
3test('useCounter increments', () => {
4  const { result } = renderHook(() => useCounter(0));
5  act(() => result.current.increment());
6  expect(result.current.count).toBe(1);
7});