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

Короткий ответ

Хуки - это функции в React, которые позволяют использовать состояние и другие возможности React в функциональных компонентах без написания классов. Самые часто используемые хуки: useState для управления состоянием, useEffect для побочных эффектов, useContext для работы с контекстом, useRef для ссылок на DOM-элементы и useMemo/useCallback для оптимизации производительности.

Подробное объяснение

Хуки были введены в React 16.8 как способ переиспользования логики между компонентами без изменения их иерархии. Они решают проблемы, связанные с классами: сложность понимания this, необходимость привязки методов, дублирование логики в lifecycle-методах.

Основные хуки:

• useState - добавляет локальное состояние в функциональный компонент. Возвращает массив из двух элементов: текущее значение и функцию для его обновления.
• useEffect - выполняет побочные эффекты (запросы к API, подписки, таймеры). Заменяет componentDidMount, componentDidUpdate, componentWillUnmount. Принимает функцию эффекта и массив зависимостей.
• useContext - позволяет читать и подписываться на контекст React без использования Consumer.
• useRef - создаёт изменяемый объект, который сохраняется между рендерами. Часто используется для доступа к DOM-элементам.
• useMemo и useCallback - мемоизируют значения и функции для оптимизации производительности.

Дополнительные хуки: useReducer для сложной логики состояния, useLayoutEffect для синхронных эффектов, useImperativeHandle для настройки ref.

На практике

При разработке на React хуки используются постоянно. useState применяется для хранения данных формы, флагов загрузки, ошибок. useEffect - для загрузки данных при монтировании, подписки на WebSocket, обновления заголовка страницы. useRef - для фокуса на инпуте, интеграции с библиотеками, не использующими React. useMemo и useCallback - для предотвращения лишних ререндеров при передаче пропсов в дочерние компоненты.

Важно помнить правила хуков: вызывать их только на верхнем уровне компонента (не внутри циклов, условий или вложенных функций) и только из функциональных компонентов или кастомных хуков.

Пример кода

JSX
import React, { useState, useEffect, useRef } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => clearInterval(intervalRef.current);
  }, []);

  return <div>Прошло секунд: {seconds}</div>;
}

Как отвечать на собеседовании

Начни с определения хуков и их назначения. Перечисли основные хуки и кратко объясни каждый. Приведи практический пример использования. Упомяни правила хуков и почему они важны. Если спросят про кастомные хуки - покажи понимание их создания для переиспользования логики.

Что проверяет интервьюер

• Понимание концепции хуков и их преимуществ перед классовыми компонентами
• Знание правил использования хуков
• Умение выбирать правильный хук для конкретной задачи
• Понимание жизненного цикла эффектов и зависимостей
• Осведомлённость о производительности (мемоизация)

Типичные ошибки

• Вызов хуков внутри условий или циклов
• Забывание указать массив зависимостей в useEffect
• Использование useEffect для синхронных вычислений, которые можно сделать напрямую
• Мутация состояния напрямую вместо использования сеттера
• Создание новых объектов/массивов в пропсах без мемоизации
• Путаница между useEffect и useLayoutEffect