Что React.memo принимает вторым аргументом?

Что такое React.memo и зачем нужен второй аргумент?

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

Второй аргумент: функция areEqual

Второй аргумент — это функция, которая принимает два параметра: prevProps и nextProps. Она должна вернуть true, если пропсы считаются равными (ререндер не нужен), и false, если они разные (нужен ререндер). Если функция не передана, React.memo использует стандартное поверхностное сравнение.

const MyComponent = React.memo(
  (props) => <div>{props.value}</div>,
  (prevProps, nextProps) => {
    // Кастомная логика сравнения
    return prevProps.value === nextProps.value;
  }
);

Когда это полезно?

• Когда пропсы содержат объекты или массивы, которые создаются заново при каждом рендере родителя, но их содержимое не меняется.
• Когда нужно игнорировать изменения определённых пропсов.
• Для оптимизации производительности в компонентах с тяжёлыми вычислениями.

Важные замечания

• Функция сравнения вызывается только при изменении пропсов. Если компонент ререндерится по другой причине (например, из-за изменения состояния), мемоизация не применяется.
• Не стоит злоупотреблять кастомным сравнением — оно само по себе может быть дорогим.
• Если функция сравнения возвращает false слишком часто, мемоизация теряет смысл.

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