Этап 3 из 12 · ≈ 6 ч

Хуки

Основа с Junior

useState, useEffect, useRef, useMemo и правила, по которым они работают.

React хранит состояние хуков по порядку вызова в компоненте — поэтому хуки вызывают только на верхнем уровне, не в условиях и циклах.

хукдля чего
useStateсостояние
useEffectсинхронизация с внешним миром: подписки, таймеры, запросы
useRefизменяемое значение без перерисовки, ссылка на DOM
useMemo, useCallbackзапомнить вычисление или функцию между рендерами
useContextданные из контекста
useReducerсложное состояние с действиями
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);     // очистка
}, [tick]);

Что важно знать

  • Массив зависимостей должен содержать все используемые значения; пустой массив — эффект один раз после монтирования.
  • Эффект — не место для вычисления данных из props: это делают при рендере.
  • В режиме разработки StrictMode монтирует компонент дважды, чтобы поймать эффекты без очистки.
  • Свои хуки (useDebounce, useMediaQuery) выносят повторяющуюся логику.

Темы этапа

  • Refs и работа с DOM Основа

    useRef, доступ к DOM-элементам, фокус и интеграция со сторонними библиотеками.

  • Пользовательские хуки Основа

    Как выносить повторяющуюся логику с состоянием и эффектами в свои хуки.

Критерии освоения

Junior ≈ 6 ч

  • Использует useState и useEffect с правильным массивом зависимостей и очисткой
  • Соблюдает правила хуков и объясняет, почему их нельзя вызывать в условиях

Практика. Сделать компонент с таймером и подпиской на размер окна с корректной очисткой.

Middle ≈ 6 ч

  • Отличает задачи для эффекта от вычислений при рендере и убирает лишние эффекты
  • Использует useReducer для сложного состояния

Практика. Переписать компонент с пятью useEffect, убрав эффекты, которые на самом деле вычисления или обработчики событий.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Какие правила хуков в React и почему их нельзя вызывать в условиях?Junior

Хуки вызывают только на верхнем уровне компонента или своего хука — не в условиях, циклах и вложенных функциях — и только из React-функций. Причина: React хранит состояние хуков по порядку вызова; если порядок меняется между рендерами, состояние перепутается.

Полный разбор
Как работает useEffect и что такое массив зависимостей?Junior

useEffect запускает побочный эффект после отрисовки: подписки, таймеры, запросы, синхронизацию с внешней системой. Зависимости определяют, когда эффект перезапускается: [] — один раз после монтирования, [a, b] — при изменении a или b, без массива — после…

Полный разбор
Как работает useState?Junior

const [value, setValue] = useState(initial) — React хранит значение вне функции компонента, привязав его к позиции хука; при следующих рендерах возвращает текущее. setValue планирует перерисовку; если новое значение равно старому (Object.is) — рендер…

Полный разбор
Когда использовать useReducer вместо useState?Middle

useReducer(reducer, initial) хранит состояние, которое меняется через действия: dispatch({type: "added", item}), а чистая функция reducer(state, action) возвращает новое состояние. Подходит, когда полей много и они меняются вместе, переходы зависят от…

Полный разбор
Какие задачи не нужно решать через useEffect?Middle

Эффект — для синхронизации с внешней системой (подписка, таймер, сторонний виджет, запрос). Лишние эффекты: вычисление из props и state (считать при рендере), реакция на событие пользователя (код в обработчике, а не в эффекте, следящем за state), сброс…

Полный разбор
Почему обработчик видит «старое» значение состояния?Junior

Каждый рендер — снимок: функции компонента замыкают значения state этого рендера. setState не меняет переменную сразу, а планирует новый рендер. Поэтому setCount(count + 1) три раза подряд даёт +1: все три вызова видят одно и то же count. Если новое значение…

Полный разбор
Как получить доступ к DOM-элементу через useRef?Junior

const inputRef = useRef<HTMLInputElement>(null) и <input ref={inputRef}/> — после монтирования в inputRef.current будет DOM-элемент. Использовать его можно в обработчиках и эффектах (фокус, прокрутка, измерение размеров, воспроизведение видео), но не во время…

Полный разбор

Документация

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования