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

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

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

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

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

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

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

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

На практике

На собеседовании для junior-позиции важно показать понимание, что хуки - это не магия, а просто функции, которые React вызывает в определённом порядке. Интервьюер может попросить объяснить, как работает useEffect с разными массивами зависимостей: пустой массив - эффект выполняется один раз при монтировании, без массива - после каждого рендера, с переменными - при их изменении.

Также стоит упомянуть, что useState может принимать функцию для ленивой инициализации, а useEffect должен возвращать функцию очистки для предотвращения утечек памяти (например, отписка от событий или очистка таймеров).

Пример кода

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>;
}

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

Начни с краткого определения хуков, затем перечисли основные и объясни их назначение. Приведи пример из практики, где хуки упростили код. Если спросят про кастомные хуки - покажи, как вынести повторяющуюся логику (например, хук useWindowSize). Не углубляйся в сложные темы вроде useReducer или useLayoutEffect, если не спросят.

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

• Понимание, зачем нужны хуки и как они отличаются от классовых компонентов.
• Знание правил хуков (Rules of Hooks).
• Умение объяснить работу useEffect с зависимостями и очисткой.
• Базовое понимание жизненного цикла компонента в контексте хуков.

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

• Говорить, что хуки - это просто синтаксический сахар над классами (на самом деле они используют замыкания и другой механизм).
• Забывать про очистку в useEffect при работе с таймерами или подписками.
• Вызывать хуки внутри условий или циклов - это нарушает порядок вызовов.
• Путать useEffect с useLayoutEffect и не понимать разницу между ними.