React Front-end Инженер

React Front-end Инженер

Роадмап навыков для прокачки

Использование React DevTools и Redux DevTools

React → Optimization → React devtools, redux devtools

Основная идея

React DevTools и Redux DevTools — это браузерные расширения для отладки React-приложений. Они позволяют инспектировать компоненты, отслеживать изменения состояния и анализировать производительность.

Ключевые аспекты

  • React DevTools — инспекция дерева компонентов, props, state, hooks
  • Redux DevTools — просмотр actions, состояния store, time-travel debugging
  • Profiler — анализ производительности, поиск медленных компонентов
  • Components Tab — редактирование props и state в реальном времени

Основные возможности React DevTools

  • Просмотр иерархии компонентов
  • Инспекция props, state, hooks
  • Поиск компонентов по имени
  • Highlight обновляющихся компонентов
  • Профилирование рендеров

Основные возможности Redux DevTools

  • Просмотр всех dispatched actions
  • Инспекция текущего состояния store
  • Time-travel — переход к любому состоянию
  • Export/Import состояния для отладки
  • Фильтрация actions по типу

Частые ошибки на собеседованиях

  • Не знают про Profiler — думают DevTools только для просмотра props
  • Путают React DevTools и Redux DevTools — это разные инструменты
  • Не используют time-travel в Redux — мощный инструмент для отладки
  • Не знают про highlight updates — помогает найти лишние рендеры

Введение и проблематика

Разработка React-приложений требует удобных инструментов для отладки. Без них сложно понять, почему компонент перерендеривается, какие props он получает, и как изменяется состояние приложения.

React DevTools и Redux DevTools — must-have инструменты для любого React-разработчика. Они значительно ускоряют отладку и помогают находить проблемы производительности.

Какие проблемы решают?

  • Отладка состояния — что происходит с state и props
  • Поиск багов — почему компонент ведёт себя неожиданно
  • Оптимизация — какие компоненты рендерятся слишком часто
  • Понимание потока данных — как данные проходят через приложение

React DevTools

Установка

Установите расширение браузера

Доступно для Chrome, Firefox, Edge:

Откройте DevTools браузера

Нажмите F12 или Ctrl+Shift+I (Cmd+Option+I на Mac)

Найдите вкладки Components и Profiler

После установки расширения появятся две новые вкладки в DevTools

Вкладка Components

Позволяет инспектировать дерево React-компонентов:

text
Иерархия компонентов:
├── App
│   ├── Header
│   │   └── Navigation
│   ├── MainContent
│   │   ├── Sidebar
│   │   └── ArticleList
│   │       └── Article (x3)
│   └── Footer

Возможности:

ФункцияОписание
Дерево компонентовВизуализация иерархии
PropsПросмотр и редактирование props
StateПросмотр и редактирование state
HooksПросмотр значений всех hooks
SourceПереход к исходному коду
Rendered byКакой компонент отрендерил текущий

Поиск компонентов

text
Способы поиска:
1. По имени: введите "Button" в поиске
2. По регулярке: /^User.*Card$/
3. Через инспектор: кликните на элемент на странице

Highlight Updates

Включите "Highlight updates when components render" в настройках React DevTools. Компоненты будут подсвечиваться при каждом рендере — это помогает найти лишние обновления.

Цвета подсветки:

  • Синий — редкие обновления (нормально)
  • Зелёный — частые обновления (обратите внимание)
  • Жёлтый/Красный — очень частые обновления (проблема!)

Profiler

Profiler помогает найти проблемы производительности:

Откройте вкладку Profiler

В React DevTools выберите вкладку "Profiler"

Начните запись

Нажмите кнопку Record (синий круг)

Выполните действия в приложении

Делайте то, что вызывает тормоза

Остановите запись

Нажмите Stop

Анализируйте результаты

Изучите flamegraph и ranked chart

Типы визуализации

Flamegraph показывает иерархию рендеров:

  • Ширина бара = время рендера
  • Цвет = относительное время (жёлтый/оранжевый — медленно)
  • Серые компоненты не рендерились

Что искать в Profiler

text
Проблемы производительности:
✗ Компонент рендерится без изменения props/state
✗ Список рендерит все элементы при добавлении одного
✗ Дорогие вычисления в render
✗ Слишком глубокая иерархия обновлений

Redux DevTools

Установка

Установите расширение браузера

Redux DevTools для Chrome

Подключите к приложению

❓

Code Example 1: Как подключить Redux DevTools к приложению? Нужно ли дополнительно настраивать DevTools при использовании Redux Toolkit?

jsx
import { configureStore } from '@reduxjs/toolkit';
 
const store = configureStore({
  reducer: rootReducer,
  // DevTools включены автоматически в development
});

Или для классического Redux

❓

Code Example 2: Чем отличается подключение DevTools в классическом Redux от Redux Toolkit?

jsx
import { createStore } from 'redux';
import { composeWithDevTools } from '@redux-devtools/extension';
 
const store = createStore(
  rootReducer,
  composeWithDevTools()
);

Основные возможности

ФункцияОписание
Action LogИстория всех dispatched actions
StateТекущее состояние store
DiffЧто изменилось после action
Time TravelПеремотка к любому состоянию
Export/ImportСохранение и загрузка состояния
JumpПереход к конкретному action

Time-Travel Debugging

Time-travel — одна из самых мощных возможностей Redux DevTools. Вы можете "перемотать" приложение к любому предыдущему состоянию и посмотреть, как оно выглядело.

text
Сценарий использования:

1. Пользователь сообщает о баге
2. Вы воспроизводите действия
3. В Redux DevTools видите все actions
4. Находите action, после которого возник баг
5. Используете Jump/Skip для анализа
6. Находите причину проблемы

Фильтрация Actions

jsx
// В настройках Redux DevTools можно фильтровать actions:
// - По типу: показать только 'user/*' actions
// - Blacklist: скрыть '@@redux-form/*'
// - Whitelist: показать только указанные типы

Практические примеры

Отладка неожиданного рендера

❓

Code Example 3: Какая проблема в этом коде вызывает лишние ре-рендеры дочернего компонента? Как её исправить?

jsx
// Компонент рендерится слишком часто
 
// 1. Включите Highlight Updates в React DevTools
// 2. Найдите компонент, который мигает при каждом действии
// 3. Проверьте его props в Components tab
// 4. Найдите prop, который создаётся заново:
 
// ❌ Проблема: новый объект при каждом рендере родителя
<Child style={{ color: 'red' }} />
<Child onClick={() => handleClick()} />
 
// ✅ Решение: стабильные ссылки
const style = useMemo(() => ({ color: 'red' }), []);
const handleClickCb = useCallback(() => handleClick(), []);
 
<Child style={style} />
<Child onClick={handleClickCb} />

Отладка Redux состояния

jsx
// Проблема: action отправляется, но UI не обновляется
 
// 1. Откройте Redux DevTools
// 2. Найдите ваш action в списке
// 3. Проверьте вкладку Diff — что изменилось
// 4. Проверьте вкладку State — правильные ли данные
 
// Частые причины:
// - Мутация state в reducer (ссылка не изменилась)
// - Опечатка в action type
// - Selector возвращает старые данные

Горячие клавиши

React DevTools

КлавишаДействие
Ctrl+FПоиск компонента
↑↓Навигация по дереву
→←Развернуть/свернуть
Ctrl+ClickИнспектировать элемент

Redux DevTools

КлавишаДействие
Ctrl+HСкрыть/показать DevTools
Ctrl+JJump к выбранному action
Ctrl+⇧+EExport состояния

Пограничные кейсы

⚠️

В production React DevTools работают, но Profiler может быть отключён. Для профилирования в production нужна специальная сборка.

❓

Code Example 4: Для чего нужна специальная сборка с --profile? Почему обычный production build не подходит для профилирования?

jsx
// Профилирование production-сборки
// В package.json:
{
  "scripts": {
    "build:profile": "react-scripts build --profile"
  }
}

DevTools не показывает компоненты

Причины:

  • React не в development режиме
  • Старая версия React (< 16.0)
  • Конфликт с другими расширениями
  • Компоненты минифицированы (production)

Плюсы и минусы

Плюсы DevTools

ИнструментВыгода
React DevToolsБыстрая инспекция props/state
ProfilerПоиск узких мест производительности
Redux DevToolsTime-travel debugging
Highlight UpdatesВизуальный поиск лишних рендеров

Ограничения

ПроблемаОписание
Performance overheadDevTools замедляют приложение
ProductionНекоторые функции недоступны
Большие stateМедленно работают с огромным состоянием

Вопросы интервьюера

Q: Для чего нужен React DevTools?

Для инспекции React-компонентов: просмотр и редактирование props, state, hooks, профилирование производительности, поиск лишних рендеров.

Q: Что такое time-travel в Redux DevTools?

Возможность "перемотать" приложение к любому предыдущему состоянию. Помогает отлаживать баги, анализируя последовательность actions.

Q: Как найти компоненты, которые рендерятся слишком часто?

Включить "Highlight updates" в React DevTools или использовать Profiler для записи и анализа рендеров.

Q: Работают ли DevTools в production?

React DevTools работают, но с ограничениями. Profiler требует специальной сборки. Redux DevTools обычно отключают в production.

Источники

Code Example 1: Redux DevTools with configureStore

❓ Как подключить Redux DevTools к приложению? Нужно ли дополнительно настраивать DevTools при использовании Redux Toolkit?

jsx
import { configureStore } from '@reduxjs/toolkit';
 
const store = configureStore({
  reducer: rootReducer,
});

Code Example 2: Redux DevTools with classic Redux

❓ Чем отличается подключение DevTools в классическом Redux от Redux Toolkit?

jsx
import { createStore } from 'redux';
import { composeWithDevTools } from '@redux-devtools/extension';
 
const store = createStore(
  rootReducer,
  composeWithDevTools()
);

Code Example 3: Debugging unnecessary re-renders

❓ Какая проблема в этом коде вызывает лишние ре-рендеры дочернего компонента? Как её исправить?

Problem:

jsx
<Child style={{ color: 'red' }} />
<Child onClick={() => handleClick()} />

Solution:

jsx
const style = useMemo(() => ({ color: 'red' }), []);
const handleClickCb = useCallback(() => handleClick(), []);
 
<Child style={style} />
<Child onClick={handleClickCb} />

Code Example 4: Production profiling build

❓ Для чего нужна специальная сборка с --profile? Почему обычный production build не подходит для профилирования?

json
{
  "scripts": {
    "build:profile": "react-scripts build --profile"
  }
}