Разбери компоненты, состояние и эффекты. Проверь, можешь ли объяснить React на примерах, а не только назвать хуки.
Примеры открыты без регистрации
// count равен 0
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);Начни с ответа своими словами. Затем открой разбор и проверь, можешь ли объяснить не только правило, но и пример его применения.
Props передаются компоненту снаружи и не изменяются им напрямую. State хранит состояние компонента между рендерами. Обновление состояния запрашивает новый рендер; вычисляемые из props или state значения часто не нужно хранить отдельно.
Нужно ли хранить в state длину массива, который уже приходит через props?
Каждый рендер получает своё значение state. Вызов setter не меняет переменную в уже выполняющемся обработчике. Если следующее значение зависит от предыдущего, используй функциональное обновление, например setCount(c => c + 1).
Почему несколько setCount(count + 1) в одном обработчике не означают несколько последовательных прибавлений?
Эффект нужен для синхронизации с внешней системой: подпиской, таймером или сетевым соединением. Для вычисления значения из props обычно достаточно самого рендера. Подписки и таймеры требуют корректной очистки; зависимости должны отражать реактивные значения эффекта.
Как избежать оставшегося таймера после размонтирования компонента?
key помогает React сопоставлять элементы между рендерами. Для изменяемого списка лучше использовать стабильный идентификатор данных. Индекс может привести к переносу состояния к другому элементу при вставке, удалении или перестановке.
Что произойдёт с локальным состоянием строки, если вставить новый элемент в начало списка с key по индексу?
У тебя есть массив задач со свойствами id и done. Верни новый массив, изменив done только у задачи с нужным id.
toggle([{ id: 1, done: false }], 1);
// [{ id: 1, done: true }]Проверь основной сценарий и крайние случаи. Объясни ход решения и ограничения выбранного подхода.
const toggle = (items, id) =>
items.map(item => item.id === id
? { ...item, done: !item.done }
: item);map создаёт новый массив, а spread — новый объект изменяемой задачи. В компоненте вызови setItems(prev => toggle(prev, id)). Время O(n).
Отметь пройденные темы. Это пример маршрута: глубину и темп выбирай под свою вакансию и уровень.
Повторено 0 из 5 блоков
После тренировки появятся итоговая оценка и общий отзыв. В Pro — подробный разбор ответов, материалы для повторения и все тренировки по System Design.
Повтори обновление состояния. Сравни setCount(count + 1) и setCount(c => c + 1) внутри одного обработчика.
Да. Выбери Junior и начни с основ направления. Глубину вопросов и список тем сверяй с требованиями вакансии.
Это подготовка к техническому интервью и практика уже изученных навыков. Для старта пригодятся базовые знания выбранного направления.
Все вопросы, разборы, задача и план на этой странице. Для персональной тренировки и сохранения результатов понадобится аккаунт. Условия — на странице тарифов.
Посмотри, как выглядит результат по React: что уже получается, в каких темах есть ошибки и как разобраться в сложной теме.
3 тренировки бесплатно. Детальный разбор и материалы доступны с подпиской Pro.
Junior · 10 вопросов · 2 задачи
Ты уверенно отвечаешь на базовые вопросы по React. Повтори темы, в которых возникли ошибки.
Повтори обновление состояния. Сравни setCount(count + 1) и setCount(c => c + 1) внутри одного обработчика.
Другая технология или направление?
Настроить подготовку под свой стек