Пользовательские хуки

Пользовательский хук — функция с именем на use, которая вызывает другие хуки. Она делит логику, а не состояние: у каждого компонента, который её вызвал, своё состояние.

function useDebounced(value, delay = 300) {
  const [v, setV] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setV(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return v;
}

const q = useDebounced(search);

Что важно знать

• Подчиняются тем же правилам хуков: вызывать на верхнем уровне.
• Хорошие кандидаты: подписки (useOnlineStatus, useMediaQuery), таймеры, работа с localStorage, логика форм.
• Возвращать стабильные значения (useCallback для функций), если их будут использовать в зависимостях.
• Тестирование хуков — renderHook из Testing Library.