> Что такое хуки в React и какие чаще всего используются? (React)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: БФТ

Стек: React

> Пример ответа

Хуки (hooks) в React - это функции, которые позволяют использовать состояние и другие возможности React без написания классовых компонентов. Они были введены в React 16.8 и стали стандартом для написания компонентов. Хуки работают только внутри функциональных компонентов и не могут вызываться в циклах или условных операторах.

Наиболее часто используемые хуки:

  1. useState - управление локальным состоянием. Возвращает массив из двух элементов: текущее значение и функцию для его обновления. Пример: const [count, setCount] = useState(0).

  2. useEffect - выполнение побочных эффектов (запросы к API, подписки, таймеры). Принимает функцию-эффект и массив зависимостей. Выполняется после рендера. Если зависимости пусты, эффект срабатывает только при монтировании.

  3. useContext - доступ к контексту React без прокидывания пропсов через вложенные компоненты. Принимает объект контекста, созданный через React.createContext.

  4. useReducer - альтернатива useState для сложной логики состояния, особенно когда следующее состояние зависит от предыдущего. Работает по принципу Redux: принимает редьюсер и начальное состояние.

  5. useCallback - мемоизация функций. Возвращает стабильную ссылку на функцию, которая не пересоздаётся при каждом рендере, если зависимости не изменились. Полезна для оптимизации передачи колбэков в дочерние компоненты.

  6. useMemo - мемоизация вычислений. Кэширует результат вызова функции до тех пор, пока зависимости не изменятся. Используется для дорогостоящих вычислений.

  7. useRef - создаёт изменяемый объект, который сохраняется между рендерами. Часто используется для доступа к DOM-элементам (например, фокус на инпуте) или хранения любых мутируемых значений.

  8. useLayoutEffect - аналог useEffect, но срабатывает синхронно после всех изменений DOM, но до того, как браузер отрисует экран. Используется для измерений или анимаций, требующих синхронного обновления.

Эти хуки покрывают 90% потребностей при разработке на React. Для кастомных сценариев можно создавать собственные хуки, комбинируя встроенные.

> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?

Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью