Как можно избежать каскадного ре-рендеринга дочерних компонентов при изменении state в родительском компоненте?

Проблема каскадного ре-рендеринга

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

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

Первый шаг — обернуть дочерние компоненты в React.memo. Это заставляет React сравнивать предыдущие и новые props (поверхностно) и пропускать рендер, если они равны. Однако memo работает только если ссылки на props стабильны. Поэтому функции-обработчики, передаваемые вниз, нужно оборачивать в useCallback, а объекты и массивы — в useMemo.

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 handleClick = useCallback(() => setCount(c => c + 1), []);
  const data = useMemo(() => ({ value: count }), [count]);
  return <Child onClick={handleClick} data={data} />;
}

В примере Child не будет ре-рендериться при изменении count, если data и onClick не меняются. Но здесь data зависит от count, поэтому при изменении счётчика дочерний компонент всё равно обновится — это ожидаемо.

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

• Выносите часто изменяемое состояние в отдельный компонент-обёртку, чтобы его потомки не затрагивались.
• Используйте useContext с разделением на несколько контекстов, чтобы компоненты подписывались только на нужные части данных.
• Для списков используйте стабильные ключи и мемоизацию элементов списка.

Вывод

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