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

Проблема ререндеров в React

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

Решение: React.memo с кастомным сравнением

React.memo — это функция высшего порядка, которая мемоизирует компонент. По умолчанию она делает поверхностное сравнение пропсов (shallow compare) и пропускает ререндер, если все пропсы равны по ссылке. Однако, если вы хотите игнорировать изменения конкретных пропсов, передайте вторым аргументом функцию сравнения. Эта функция получает предыдущие и новые пропсы и должна вернуть true, если ререндер не нужен, и false, если нужен.

const MyComponent = React.memo(function MyComponent({ important, ignored }) {
  console.log('Render');
  return <div>{important}</div>;
}, (prevProps, nextProps) => {
  // Игнорируем изменения ignored, сравниваем только important
  return prevProps.important === nextProps.important;
});

В этом примере компонент будет перерендериваться только при изменении пропса important. Изменения ignored не вызовут ререндер, так как функция сравнения возвращает true, когда important не изменился.

Практическое применение

Этот подход полезен, когда компонент получает часто меняющиеся пропсы (например, колбэки или данные, которые не влияют на вывод) и редкие значимые пропсы. Например, в таблице с сортировкой можно игнорировать пропс с функцией сортировки, если она создается заново каждый рендер родителя, но важные данные остаются прежними.

Важные нюансы

• Функция сравнения должна быть чистой и не иметь побочных эффектов.
• Если пропсы содержат объекты или массивы, сравнивайте их по глубокому равенству вручную, так как поверхностное сравнение не сработает.
• Не злоупотребляйте мемоизацией: если компонент дешевый, лишние проверки могут замедлить работу.

Вывод

Используйте React.memo с кастомной функцией сравнения, когда нужно точно контролировать, какие изменения пропсов должны вызывать ререндер. Это эффективный способ оптимизации производительности в React-приложениях, особенно при работе с большими деревьями компонентов.