Что такое shallowEqual?

shallowEqual — это утилита, которая сравнивает два объекта только на первом уровне вложенности. Она проверяет, что у объектов одинаковый набор ключей и что значения по каждому ключу строго равны (===). Вложенные объекты и массивы сравниваются по ссылке, а не по содержимому, поэтому два разных объекта с одинаковыми полями будут считаться разными.

Как это работает

Алгоритм простой: сначала сравниваются ссылки на сами объекты, затем количество ключей, затем каждое значение по ключу через Object.is или ===. Если хотя бы одно значение отличается по ссылке или примитиву — результат false.

function shallowEqual(objA, objB) {
  if (Object.is(objA, objB)) return true;
  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) return false;
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) return false;
  for (let i = 0; i < keysA.length; i++) {
    const key = keysA[i];
    if (!Object.prototype.hasOwnProperty.call(objB, key) ||
        !Object.is(objA[key], objB[key])) return false;
  }
  return true;
}

Где применяется

• В React.memo как функция сравнения пропсов по умолчанию.
• В PureComponent для сравнения state и props перед ререндером.
• В useSelector из react-redux для проверки изменений в сторе.
• В собственных оптимизациях, где важно быстро отсеять лишние обновления.

Пример с React.memo

const UserCard = React.memo(function UserCard({ user, onClick }) {
  return <div onClick={onClick}>{user.name}</div>;
});
// Если родитель передаёт новый объект user каждый рендер,
// shallowEqual вернёт false и компонент перерендерится.
// Решение: мемоизировать user через useMemo.

Важно помнить: shallowEqual не спасёт, если вы каждый раз создаёте новые вложенные объекты или функции. В таких случаях нужна либо мемоизация (useMemo, useCallback), либо кастомная функция сравнения.

Итог: shallowEqual стоит применять для быстрой проверки изменений на верхнем уровне объектов, особенно в связке с React.memo и useSelector, когда структура данных плоская и ссылки на вложенные значения стабильны.