Что такое пользовательские hooks и как их написать?

Question

Accepted Answer

**Пользовательский hook** — это функция, имя которой начинается с `use` и которая вызывает другие hooks, чтобы **упаковать и повторно использовать логику с состоянием** — без изменения вашего дерева компонентов (в отличие от HOCs или render props). ```jsx // extract "fetch + loading + error" logic once, reuse everywhere function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const ctrl = new AbortController(); setLoading(true); fetch(url, { signal: ctrl.signal }) .then(r => r.json()) .then(setData) .catch(e => { if (e.name !== "AbortError") setError(e); }) .finally(() => setLoading(false)); return () => ctrl.abort(); }, [url]); return { data, loading, error }; } // usage — the component stays declarative: function Profile({ id }) { const { data, loading, error } = useFetch(`/api/users/${id}`); if (loading) return ; return

{data.name}

; } ``` ## Важные свойства - Соблюдает **Rules of Hooks** (вызов на верхнем уровне; только из компонентов/hooks). - **Состояние изолировано для каждого вызова.** Два компонента, использующих `useFetch`, получают каждый свое независимое состояние — совместное использование hook не означает совместное использование данных. - Соглашение: назовите его `useX` и верните состояние + функции (обычно массив или объект). ## Почему это важно Пользовательские hooks — это идиоматичный способ совместного использования логики (получение данных, формы, подписки, media queries) в современном React, сохраняя компоненты компактными и логику тестируемой изолированно.