Проверяет ли memo объект внутри или сравнивает объекты через ===

Как работает сравнение объектов в React.memo?

React.memo — это компонент высшего порядка (Higher-Order Component) в React, предназначенный для оптимизации производительности функциональных компонентов путем предотвращения ненужных ререндеров. Ключевой вопрос: как именно он сравнивает предыдущие и текущие пропсы?

Механизм сравнения в React.memo

По умолчанию, React.memo использует поверхностное сравнение (shallow comparison) объектов. Это означает, что для каждого свойства пропсов выполняется операция строгого равенства (===).

Пример стандартного поведения:

const MyComponent = React.memo((props) => {
  return <div>{props.message}</div>;
});

В данном случае React.memo будет:

1. При каждом рендере родительского компонента получать новые пропсы для MyComponent.
2. Сравнивать каждый ключ предыдущего объекта props с каждым ключом нового объекта props используя ===.
3. Если все ключи равны по ===, ререндер компонента предотвращается. Если хотя бы один ключ не равен — компонент ререндерится.

Ключевые особенности сравнения === для объектов

Для понимания важно помнить, как работает === с объектами и другими типами данных:

• Примитивные типы (string, number, boolean, null, undefined): === сравнивает их значения.
• Объекты (включая массивы и функции): === сравнивает ссылки (references). Два объекта считаются равными только если они являются одним и тем же объектом в памяти.

Пример, иллюстрирующий проблему:

// Родительский компонент
const ParentComponent = () => {
  // При каждом рендере ParentComponent создается НОВЫЙ объект
  const userProfile = { name: 'Алексей', role: 'Developer' };

  return <MyComponent profile={userProfile} />;
};

// Оптимизированный компонент
const MyComponent = React.memo(({ profile }) => {
  return <div>{profile.name}</div>;
});

В этом примере MyComponent будет рендериться каждый раз, несмотря на то, что содержимое объекта userProfile одинаково. Причина: каждый рендер ParentComponent создает новый объект { name: 'Алексей', role: 'Developer' }, и его ссылка отличается от ссылки предыдущего объекта. Сравнение profile.prev === profile.current возвращает false.

Решение проблемы: пользовательская функция сравнения

Если поверхностное сравнение по ссылкам недостаточно (например, когда пропсы — глубоко вложенные объекты, которые могут быть структурно одинаковыми, но с разными ссылками), React.memo позволяет предоставить вторым аргументом собственную функцию сравнения.

Пример с глубоким сравнением (deep comparison):

import isEqual from 'lodash.isequal'; // или другая библиотека для глубокого сравнения

const MyComponent = React.memo(
  ({ complexConfig }) => {
    return <div>Конфигурация: {complexConfig.level}</div>;
  },
  (prevProps, nextProps) => {
    // Используем глубокое сравнение для объекта complexConfig
    return isEqual(prevProps.complexConfig, nextProps.complexConfig);
  }
);

Функция сравнения принимает два аргумента:

• prevProps — пропсы предыдущего рендера.
• nextProps — пропсы текущего (нового) рендера.

Логика функции:

• Если функция возвращает true — ререндер не происходит (пропсы считаются равными).
• Если функция возвращает false — ререндер происходит.

Практические рекомендации и выводы

• React.memo эффективен для примитивных пропсов или объектов, которые не создаются заново при каждом рендере родителя (например, объекты из состояния, которые меняются редко).
• Проблема с новыми объектами часто решается не через глубокое сравнение в memo, а через оптимизацию на уровне родительского компонента: использование useMemo, useCallback для стабилизации ссылок на объекты и функции, передаваемые в пропсы.
• Глубокое сравнение (deep comparison) как второй аргумент — мощный инструмент, но его следует применять с осторожностью, так как само глубокое сравнение может быть затратной операцией для очень больших или сложных объектов. Необходимо оценить, будет ли выигрыш от предотвращения ререндера превышать затраты на сравнение.
• Основной принцип: React.memo по умолчанию не анализирует "внутренности" объекта. Он сравнивает пропсы на уровне ссылок (===). Для анализа содержимого объектов требуется явное указание пользовательской функции сравнения.

Таким образом, ответ на вопрос: React.memo по умолчанию сравнивает объекты через ===, т.е. по ссылкам, а не по содержимому. Для сравнения по содержимому необходимо реализовать собственную логику.