> Что такое хуки в React и какие чаще всего используются? (React)
Уровень: junior · Роль: frontend · Категория: Технические вопросы
Компании: БФТ
Стек: React
> Пример ответа
Хуки (hooks) в React - это функции, которые позволяют использовать состояние и другие возможности React без написания классовых компонентов. Они были введены в React 16.8 и стали стандартом для написания компонентов. Хуки работают только внутри функциональных компонентов и не могут вызываться в циклах или условных операторах.
Наиболее часто используемые хуки:
-
useState - управление локальным состоянием. Возвращает массив из двух элементов: текущее значение и функцию для его обновления. Пример:
const [count, setCount] = useState(0). -
useEffect - выполнение побочных эффектов (запросы к API, подписки, таймеры). Принимает функцию-эффект и массив зависимостей. Выполняется после рендера. Если зависимости пусты, эффект срабатывает только при монтировании.
-
useContext - доступ к контексту React без прокидывания пропсов через вложенные компоненты. Принимает объект контекста, созданный через
React.createContext. -
useReducer - альтернатива
useStateдля сложной логики состояния, особенно когда следующее состояние зависит от предыдущего. Работает по принципу Redux: принимает редьюсер и начальное состояние. -
useCallback - мемоизация функций. Возвращает стабильную ссылку на функцию, которая не пересоздаётся при каждом рендере, если зависимости не изменились. Полезна для оптимизации передачи колбэков в дочерние компоненты.
-
useMemo - мемоизация вычислений. Кэширует результат вызова функции до тех пор, пока зависимости не изменятся. Используется для дорогостоящих вычислений.
-
useRef - создаёт изменяемый объект, который сохраняется между рендерами. Часто используется для доступа к DOM-элементам (например, фокус на инпуте) или хранения любых мутируемых значений.
-
useLayoutEffect - аналог
useEffect, но срабатывает синхронно после всех изменений DOM, но до того, как браузер отрисует экран. Используется для измерений или анимаций, требующих синхронного обновления.
Эти хуки покрывают 90% потребностей при разработке на React. Для кастомных сценариев можно создавать собственные хуки, комбинируя встроенные.
> Похожие задачи по frontend
Что такое React Hook Form и для чего он используется
Что такое хуки в React и какие чаще всего используются
Какие инструменты используются для тестирования React-компонентов
В каких случаях использовать useState и Redux и почему
> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?
Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью