Как отслеживать лишние перерендеры?

Методы отслеживания лишних перерендеров

Лишние перерендеры — проблема производительности, которая может значительно замедлить приложение. Я использую несколько проверенных методов для их выявления и отладки.

1. React DevTools Profiler

Это основной инструмент для анализа перерендеров. В расширении React DevTools есть вкладка Profiler, которая записывает все перерендеры и показывает время выполнения.

// Просто откройте DevTools -> Profiler -> нажмите Record
// затем взаимодействуйте с приложением
// Profiler покажет все компоненты которые перерендерились

В профайлере я вижу:

• Какие компоненты перерендерились
• Сколько времени это заняло
• Что причина перерендера (props/state изменились)

2. Встроенный <Profiler> API

Для программного отслеживания используется компонент Profiler из React:

import { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  console.log(id + ' (' + phase + ') took ' + actualDuration + 'ms');
}

export function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <Header />
      <Main />
      <Footer />
    </Profiler>
  );
}

3. React.memo для предотвращения перерендеров

Если компонент получает одинаковые props, но всё равно перерендеривается, оберните его в React.memo:

const Button = React.memo(({ label, onClick }) => {
  console.log('Button rendered');
  return <button onClick={onClick}>{label}</button>;
});

Memo сравнивает props и перерендеривает только если они изменились.

4. Проверка зависимостей в хуках

Ошибки в dependency arrays — частая причина лишних перерендеров:

// НЕПРАВИЛЬНО - зависимость отсутствует
useEffect(() => {
  fetchData(userId);
}, []); // userId не в зависимостях!

// ПРАВИЛЬНО
useEffect(() => {
  fetchData(userId);
}, [userId]); // теперь эффект запустится когда userId изменится

// Для функций и объектов используй useCallback/useMemo
const handleClick = useCallback(() => {
  // ...
}, [dependency]);

5. Проверка идентичности объектов

Частая ошибка — создание нового объекта каждый рендер:

// НЕПРАВИЛЬНО - новый объект при каждом рендере
function Parent() {
  return <Child config={{ theme: 'dark' }} />;
}

// ПРАВИЛЬНО - мемоизируем объект
function Parent() {
  const config = useMemo(() => ({ theme: 'dark' }), []);
  return <Child config={config} />;
}

6. Консольное логирование

Добавь логирование в компоненты для отслеживания:

function MyComponent({ id }) {
  useEffect(() => {
    console.log('MyComponent ' + id + ' rendered');
  });
  
  return <div>{id}</div>;
}

7. why-did-you-render для дебага

Использую библиотеку @welldone-software/why-did-you-render в разработке:

import whyDidYouRender from '@welldone-software/why-did-you-render';

if (process.env.NODE_ENV === 'development') {
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

Она логирует почему компонент перерендерился и какие props изменились.

Практический подход

Мой workflow для оптимизации:

1. Открываю React DevTools Profiler
2. Записываю взаимодействие пользователя
3. Ищу компоненты с неожиданными перерендерами
4. Проверяю dependency arrays в хуках
5. Применяю React.memo если нужно
6. Проверяю что props действительно изменились

Заключение

Отслеживание перерендеров — важный навык для оптимизации React приложений. React DevTools Profiler — мой первый выбор, а why-did-you-render помогает в сложных случаях.