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

Проблема лишних ре-рендеров

В React при изменении состояния или пропсов родительского компонента все его дочерние компоненты по умолчанию перерендериваются. Это может привести к избыточным вычислениям и снижению производительности, особенно если дочерний компонент тяжёлый или их много.

Основные методы оптимизации

• React.memo — обёртка для функционального компонента, которая сравнивает предыдущие и новые пропсы (поверхностно) и пропускает рендер, если они не изменились.
• useCallback — хук для мемоизации функций. Возвращает ту же ссылку на функцию, пока не изменятся зависимости.
• useMemo — хук для мемоизации значений (объектов, массивов). Позволяет избежать создания новых ссылок при каждом рендере.

Пример кода

import React, { useState, useCallback, memo } from 'react';

const Child = memo(({ onClick }) => {
  console.log('Child render');
  return <button onClick={onClick}>Click</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <Child onClick={handleClick} />
    </div>
  );
}

В примере Child обёрнут в React.memo, а handleClick мемоизирован через useCallback. При изменении count родитель перерендеривается, но Child не рендерится заново, так как пропс onClick остался тем же.

Вывод

Применяйте React.memo для компонентов, которые часто получают одни и те же пропсы, а useCallback/useMemo — для стабилизации ссылок на функции и объекты. Это особенно полезно в списках, формах и компонентах с тяжёлой отрисовкой.