Что такое хуки в React и какие чаще всего используются?
Что проверяют
Знаете ли вы не список названий, а правила, по которым хуки работают. Перечислить useState и useEffect может любой, поэтому вопрос почти всегда продолжается: почему хук нельзя вызвать в условии и когда эффект нужен, а когда нет.
Как отвечать
Хуки это функции, дающие функциональному компоненту состояние, доступ к контексту и связь с внешним миром. Появились они не ради отказа от классов, а чтобы переиспользовать логику с состоянием без обёрток вокруг дерева компонентов.
Часто используемые: useState для локального состояния, useEffect для синхронизации с внешними системами (подписки, таймеры, императивные интерфейсы), useContext для чтения контекста, useRef для изменяемой ссылки, которая не вызывает повторный рендер, useMemo и useCallback для тяжёлых вычислений и стабильных ссылок, useReducer для сложных переходов состояния. В современных версиях React к ним добавились хуки для форм и оптимистичных обновлений.
Правила стоит проговорить отдельно: хук вызывается только на верхнем уровне компонента или другого хука, без условий и циклов, потому что React сопоставляет состояние с хуком по порядку вызовов. Своя логика с состоянием выносится в собственный хук с именем, начинающимся на use. За соблюдением следит правило линтера, и отключать его не стоит.
Где спотыкаются
Прячут вызов хука под условие или ранний возврат. Порядок вызовов меняется между рендерами, состояние съезжает на соседний хук, и ошибка проявляется совсем не там, где сделана.
Держат в эффекте то, что выводится из уже имеющихся данных. Отфильтрованный список или сумма считаются прямо при рендере, а лишний эффект добавляет второй проход и рассинхронизацию значений на экране.
Забывают функцию очистки и честные зависимости. Подписка без отписки утекает, а гонка ответов оставляет на экране устаревшие данные; двойной вызов эффекта в режиме разработки как раз обнажает эту проблему заранее.