Вопросы по React
Разберёшь, как React рендерит и обновляет интерфейс, как работают хуки, эффекты и оптимизации. Сможешь уверенно отвечать про React 19, Suspense и серверные компоненты.
11 модулей 258 вопросов и задач 5 билетов
Проверьте себя: тест по React
20 вопросов, 10 минут, уровень junior, middle или senior
Рендер и reconciliation
Что запускает рендер, как React сравнивает деревья и зачем нужны key.
Урок: Как React рендерит и сравнивает деревья 7 минСостояние и useState/useReducer
Снимок состояния, батчинг, функциональные обновления и редьюсеры.
Урок: useState и useReducer без сюрпризов 7 мин- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация
Ещё 26 вопросов и задач
- Props, скопированные в state
- Правила хуков
- Пакетирование обновлений
- Производное состояние с ключом
- Подписка на внешнее хранилище
- useEventListener
- Две установки подряд
- Отмена действия в компоненте
- Производное состояние
- Ленивая инициализация состояния
- Обновление объекта в состоянии
- useReducer
- useOnClickOutside
- Стабильные экшены хука
- useDebounce
- useInterval
- useLocalStorage
- usePrevious
- useToggle
- Мутация в редьюсере
- setState в теле компонента
- sort и state
- Как спроектировать state
- useState или useReducer
- Значение сразу после setState
- Три setCount подряд
Эффекты и жизненный цикл
Когда нужен useEffect, зависимости, очистка и типичные ошибки.
Урок: useEffect: синхронизация, а не жизненный цикл 8 мин- Порядок эффектов родителя и ребёнка
- Порядок очистки при смене зависимости
- Фильтрация через эффект
- Массив зависимостей
- Функция очистки эффекта
- Назначение эффектов
- useLayoutEffect
- Гонка запросов
Ещё 15 вопросов и задач
- Таймер с устаревшим state
- Эффект без массива зависимостей
- Объект в зависимостях
- useEffect: зависимости и очистка
- Устаревшее замыкание
- Отмена запроса через AbortController
- Порядок очистки эффектов
- Оптимистичное обновление
- Устаревшее замыкание в интервале
- Гонка асинхронных запросов
- Загрузка данных в эффекте
- Когда эффект лишний
- Эффект дважды в разработке
- Отправка формы через эффект
- Когда нужен useLayoutEffect
Ref и DOM
useRef, доступ к DOM, ref как проп в React 19 и useImperativeHandle.
Урок: useRef, DOM и ref как проп в React 19 6 мин- DOM-ref во время рендера
- forwardRef в React 19
- useImperativeHandle
- Ref-колбэк
- useRef
- Фокус сразу после показа
- Зачем useImperativeHandle
- Ручное удаление узла React
Ещё 12 вопросов и задач
memo, useMemo, useCallback
Когда мемоизация помогает, когда вредит и что делает React Compiler.
Урок: memo, useMemo, useCallback и React Compiler 8 мин- Перерендерится ли children
- React Compiler
- React.memo
- useCallback
- useMemo
- Таблица на 10 000 строк
- memo и children
- memo и стрелочная функция в props
Ещё 12 вопросов и задач
- Как memo сравнивает props
- Ввод тормозит всю страницу
- useMemo, useCallback, memo
- memo и стабильный обработчик
- useMemo с зависимостями
- Что делает React Compiler
- Как найти и убрать лишние рендеры
- Мемоизация везде: за и против
- useCallback без memo
- Неполные зависимости useMemo
- useMemo против useCallback
- Рефакторинг лишних рендеров
Context и стейт-менеджеры
Context, его цена для рендера и выбор между Redux, Zustand и серверным кешем.
Урок: Context и стейт-менеджеры без мифов 7 мин- Объект-литерал в value провайдера
- Кого перерисует смена value в Context
- Зачем делить контекст на данные и действия
- Когда Context, а когда внешний стор
- Провайдер контекста в React 19
- Prop drilling
- Селектор в сторе
- Серверное и клиентское состояние
Ещё 12 вопросов и задач
- Контекст и перерисовки
- Серверное состояние
- Составной компонент через контекст
- Контекст
- Подписка на часть контекста
- Почему в createSlice можно «мутировать»
- Серверное состояние в Redux
- Redux Toolkit или Zustand
- Где хранить состояние
- staleTime по умолчанию в TanStack Query
- Зачем useSyncExternalStore
- Селектор Zustand, возвращающий объект
Формы
Контролируемые поля, actions, useActionState и useFormStatus.
Урок: Формы в React 19: от value до actions 8 мин- Контролируемое и неконтролируемое поле
- useActionState
- useFormStatus
- useOptimistic
- Что происходит с полями после action
- Тип значения числового поля
- Когда срабатывает onChange в React
- Почему React Hook Form быстрый
Ещё 13 вопросов и задач
- Аргументы функции в useActionState
- Где вызывать useFormStatus
- useOptimistic при ошибке запроса
- Где обязательна валидация
- value без onChange
- Контролируемые и неконтролируемые поля
- Контролируемый и неконтролируемый режим
- Контролируемое поле
- Динамический список полей
- Неконтролируемая форма
- Контролируемые и неконтролируемые формы
- Actions в React 19
- Форма с валидацией
Паттерны компонентов
Композиция, кастомные хуки, составные компоненты и render props.
Урок: Паттерны компонентов: композиция, хуки, compound 7 минReact 18-19: Suspense, transitions, RSC
Конкурентный рендер, Suspense, transitions, use и серверные компоненты.
Урок: React 18-19: Suspense, transitions, RSC, компилятор 8 минТестирование
Testing Library, act, моки и что именно стоит проверять.
Урок: Тестирование React-компонентов 7 минКомпоненты на практике
Типовые задачи live-coding: от счётчика до списка с поиском.
Урок: Компонент на лайвкодинге: как не провалить 6 мин- Производное состояние
- Индекс как key и состояние строк
- Закрытие модалки по клику на подложку
- Гонка ответов в поиске
- AbortController в эффекте
- Производное состояние
- Портал
- Сброс состояния через key
Ещё 37 вопросов и задач
- Видимое окно длинного списка
- Баг: условный вызов хука
- Объект в зависимостях эффекта
- Навигация по списку стрелками
- Баг: незакрытые зависимости эффекта
- Ключи списка
- Список задач
- Доступная модалка
- Подход к лайвкодингу компонента
- Аккордеон
- Автодополнение
- Сетка месяца
- Карусель
- Чат с отправкой
- Палитра команд
- Таблица с поиском и страницами
- Выпадающий список
- Дерево с трёхсостоянием
- Панель фильтров с чипсами
- Галерея с клавиатурой
- Канбан с перетаскиванием
- Бесконечная лента
- Модальное окно
- Многошаговая форма
- Дерево комментариев
- Пагинация с многоточиями
- Сортируемая таблица
- Рейтинг звёздами
- Секундомер
- Вкладки с клавиатурой
- Всплывающие уведомления
- Дерево с раскрытием
- Картинка с плейсхолдерами
- Цепочка методов над узлом
- Поиск с загрузкой и ошибкой
- Три панели с фильтром и выбором
- Поиск по дереву файлов