Как подсчитать количество ререндеров компонента?

Подсчет ререндеров в React

Когда компонент обновляется, React выполняет его функцию повторно. Чтобы узнать, сколько раз это произошло, нельзя использовать useState, так как его изменение вызовет новый рендер, создавая бесконечный цикл. Вместо этого применяется useRef — он хранит мутабельное значение, которое не вызывает ререндер при изменении.

Пример кода

import { useRef, useEffect } from 'react';

function MyComponent() {
  const renderCount = useRef(0);
  renderCount.current += 1;

  useEffect(() => {
    console.log('Рендер номер:', renderCount.current);
  });

  return <div>Рендеров: {renderCount.current}</div>;
}

Счетчик увеличивается на каждой итерации рендера. useEffect с пустым массивом зависимостей не подойдет, так как он срабатывает только после монтирования. Используйте useEffect без зависимостей, чтобы логировать после каждого рендера.

Где это полезно

• Оптимизация производительности — выявление лишних ререндеров.
• Отладка — понимание, какие пропсы или стейт вызывают обновления.
• Обучение — наглядная демонстрация работы React.

Вывод: используйте useRef для подсчета ререндеров, когда нужно отследить частоту обновлений без влияния на сам процесс рендера.