Перейти к основному содержимому

React

Быстрый переход к обучению​

  1. React — учебный модуль
  2. Все учебные модули

Что нужно знать​

  1. Рендеринг: virtual DOM, reconciliation, роль key, batching и приоритеты обновлений.
  2. Hooks: useEffect, useMemo, useCallback, useRef, правила зависимостей и cleanup.
  3. State management: local state, lifting, context, server state, границы владения состоянием.
  4. Оптимизация: profiler-first подход, memoization по необходимости, снижение rerender scope.
  5. Надежность: Error Boundary, lazy/Suspense, hydration-границы, обработка сетевых ошибок.

Что уметь объяснить на собеседовании​

  1. Почему компонент ререндерится и как это доказать, а не предполагать.
  2. Когда memoization полезна, а когда только усложняет код.
  3. Как предотвращать гонки асинхронных запросов и stale UI.
  4. Где у Context API узкие места по производительности.
  5. Как выбирать между CSR/SSR/SSG для React-приложения.

Грейд-фокус​

  1. Junior: базовые хуки, controlled components, списки и key, жизненный цикл эффекта.
  2. Middle: data-flow, профилирование ререндеров, границы состояния и производительности.
  3. Senior: архитектура фронтенд-модулей, устойчивость релизов, перформанс-стратегия для продукта.

Глубокие кейсы собеседования​

  1. Rerender bug: родитель пересоздает callback на каждом рендере, дочерние тяжелые элементы постоянно обновляются. Сильный ответ: сначала профилируем, затем стабилизируем reference только на горячем пути.

  2. Async race в useEffect: быстрый переход между экранами приводит к устаревшему ответу API в новом контексте. Сильный ответ: AbortController + guard на актуальный запрос.

  3. Context overload: общий Provider хранит все данные страницы, изменение любой части триггерит всех подписчиков. Сильный ответ: split providers, selector-подход или вынос части state в специализированный слой.

Практический минимум​

  1. Разобрать один реальный rerender-случай через React Profiler.
  2. Реализовать список с корректными key и проверкой reorder-сценария.
  3. Написать компонент с async effect и корректным cleanup.
  4. Сделать lazy-загрузку экрана с UX-адекватным fallback.
  5. Подготовить короткий perf-отчет: проблема -> замер -> изменение -> результат.

Типовые ловушки​

  1. Оптимизировать все без диагностики.
  2. Прятать зависимости эффекта, чтобы убрать warning.
  3. Путать проблемы рендера и проблемы сети.
  4. Оценивать SSR/CSR только по SEO без учета эксплуатационной цены.

Self-review перед собеседованием​

  1. Я могу показать конкретный пример, где Profiler изменил решение.
  2. Я умею объяснить разницу между rerender, remount и repaint.
  3. Я могу назвать признаки, когда Context надо дробить.
  4. Я умею объяснить, как защищал экран от stale-response.

Связанные материалы​

  1. JavaScript
  2. TypeScript
  3. Middle JavaScript и React
  4. Senior Frontend

Архивный монолит​

Полный старый материал: React (архив)