Какие способы предотвратить лишние ре-рендеры дочернего компонента существуют в React?

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

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

Основные способы предотвращения

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

Пример кода

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

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

function Parent() {
  const [count, setCount] = useState(0);
  const [other, setOther] = useState(0);

  // useMemo для стабильного объекта
  const data = useMemo(() => ({ value: count }), [count]);

  // useCallback для стабильной функции
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <Child onClick={handleClick} data={data} />
      <button onClick={() => setOther(o => o + 1)}>Other: {other}</button>
    </div>
  );
}

В этом примере Child обёрнут в React.memo, а пропсы data и onClick стабильны благодаря useMemo и useCallback. При изменении other Child не перерендерится.

Дополнительные техники

• Подъём состояния (lifting state up) — выносить общее состояние выше, чтобы избежать лишних рендеров.
• Использование ключей (keys) для корректного сравнения элементов списка.
• Разделение компонентов на контейнеры и презентационные.

Вывод: Применяйте React.memo, useMemo и useCallback осознанно, только когда профилирование показывает проблему производительности. Избыточная мемоизация может усложнить код и не дать выигрыша.