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

По умолчанию React перерендеривает дочерние компоненты при каждом рендере родителя.

Почему это происходит

React считает, что:

• при рендере родителя могли измениться props

• компоненты являются чистыми функциями

• повторный вызов безопасен

Использование React.memo

React.memo позволяет:

• запомнить результат рендера компонента

• пропустить перерендер, если props не изменились

const Child = React.memo(function Child({ value }) {
  return <span>{value}</span>;
});

Мемоизация значений и функций

Если родитель передаёт:

• объекты

• массивы

• функции

их нужно мемоизировать:

const data = useMemo(() => ({ a: 1 }), []);
const handler = useCallback(() => {}, []);

Разделение компонентов

Также помогает:

• вынос логики в отдельные компоненты

• уменьшение области обновлений

Когда оптимизация не нужна

Не стоит оптимизировать:

• простые компоненты

• код без проблем производительности

Краткий вывод

Лишние перерендеры предотвращаются мемоизацией и аккуратной передачей props. Оптимизацию стоит применять осознанно.