← Все сеты

React: состояние, хуки, экосистема

Сет задач для закрепления React: компоненты, hooks, роутинг и управление состоянием.

Уровень: Junior+•Оценка времени: 130 мин

Цели сета

  • Писать предсказуемые компоненты с хуками
  • Разделять UI и бизнес-логику
  • Использовать Router и state-менеджмент без антипаттернов

Что ты сделаешь в сете

  • Реализовать экран каталога с фильтрами, пагинацией и URL-sync.
  • Собрать форму с оптимистичными обновлениями и rollback при ошибке.
  • Разнести UI и data-layer через кастомные хуки.
  • Добавить базовый store и проверить ререндеры через memo/useMemo.

Рекомендуемые уроки

Что такое React и зачем он нужен
React: Основы
JSX: разметка в JavaScript
React: Основы
Компоненты React
React: Основы
Props: передача данных
React: Основы
State и useState
React: Основы
События в React
React: Основы
Списки и ключи
React: Основы
Условный рендеринг
React: Основы
useEffect: побочные эффекты
React: Основы
Формы в React
React: Основы
useRef: DOM-доступ и мутабельные значения
React: Продвинутое
Context: глобальное состояние
React: Продвинутое

Что должно получиться на выходе

  • Мини-приложение React с роутингом и состоянием.
  • Профилирование ререндеров до/после оптимизации.
  • README с архитектурными решениями и компромиссами.

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

  • Компоненты остаются небольшими и переиспользуемыми.
  • Состояние не дублируется в нескольких местах без причины.
  • Маршруты, ошибки и загрузка работают стабильно.

Частые ошибки

  • Пытаться хранить всё состояние в одном глобальном store.
  • Неправильно задавать зависимости useEffect и получать гонки.
  • Оптимизировать раньше времени без профилирования.

Что положить в портфолио

Добавь в портфолио React-проект с понятной архитектурой состояния и описанием решений по производительности.

FAQ по этому сету

Сколько времени закладывать на сет «React: состояние, хуки, экосистема»?

Ориентир: 130 минут. Лучше разделить прохождение на 2-3 подхода с обязательным разбором ошибок.

Как понять, что сет пройден качественно?

Оцени себя по критериям готовности: код стабилен, edge-cases закрыты, решения читаемы и объяснимы на собеседовании.

Что добавить в портфолио после выполнения сета?

Добавь в портфолио React-проект с понятной архитектурой состояния и описанием решений по производительности.

© 2026 Road to JS · ИП Добрынина Екатерина Владимировна

ИНН 482425719598 · ОГРНИП 326480000011329 · qamos@bk.ru

Старт с нуляПлан 30 днейПодготовка к интервьюГайдыГлоссарийПрактикаТемыКонфиденциальностьОфертаВозврат