Кастомные хуки
Тема дорожной карты · Frontend разработчик
React Hooks — это функции, введённые в React 16.8, позволяющие функциональным компонентам использовать состояние, побочные эффекты, контекст и другие возможности React без написания классовых компонентов. Основные хуки: useState для локального состояния компонента, useEffect для побочных эффектов и событий жизненного цикла (получение данных, подписки, мутации DOM), useContext для потребления значений Context API, useRef для изменяемых ссылок и доступа к DOM, а также useMemo/useCallback для мемоизации дорогих вычислений и стабильных ссылок на коллбэки во избежание лишних перерисовок. Пользовательские хуки — функции с префиксом use, вызывающие другие хуки, — являются основным способом извлечения и переиспользования состоятельной логики в React-компонентах; библиотеки вроде TanStack Query предоставляют собственные хуки (useQuery, useMutation), инкапсулирующие состояние получения данных. При написании React Hooks на TypeScript указание обобщений (например useState<User | null>(null)) обеспечивает типобезопасность и улучшает автодополнение IDE по всему дереву компонентов.
Как это работает
Кастомные хуки моделирует UI как дерево компонентов — JavaScript-функций, принимающих props и возвращающих JSX. State в useState-хуках; сайд-эффекты (fetch, subscribe) — в useEffect. На изменение state React ререндерит затронутый компонент, сравнивает virtual DOM, применяет минимальные DOM-обновления. Другие крупные фреймворки: Vue (template-based, реактивность встроена), Svelte (compile-time реактивность, меньше бандлы), Solid (signal-based, fine-grained), Angular (opinionated full framework). Выбирайте по знаниям команды.
Когда применять
React — самый большой хайринг + экосистема; Vue — "легче учить, есть шаблоны"; Svelte/Solid — самые маленькие бандлы + fine-grained реактивность; Angular — enterprise + full framework. Читайте официальную доку того, что выбрали; second-hand туториалы отстают от фичей. Не смешивайте фреймворки в одном приложении.
Типичные ошибки
Ловушки Кастомные хуки: useEffect для того, что React делает сам (computed values, зеркалирование props); обновление state в render (infinite loop); огромные компоненты вместо декомпозиции; непонимание key prop в списках (порча при reorder); over-fetching на каждый render. Гайд React "You Might Not Need an Effect" убирает половину useEffect в реальных кодовых базах.