Пользовательский хук — функция с именем на 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.