Как корректно сравнить два объекта по полям для предотвращения лишних вызовов setState?

Поверхностное сравнение объектов в React

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

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

Поверхностное сравнение проходит по ключам объекта и сравнивает значения с помощью ===. Если хотя бы одно поле изменило ссылку, сравнение возвращает false, и компонент ререндерится. Это эффективно, если объекты иммутабельны — при изменении создаётся новый объект с новыми ссылками на поля.

Пример кода

const prevProps = { user: { name: 'John' } };
const nextProps = { user: { name: 'John' } };

// Поверхностное сравнение
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++) {
    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
        !Object.is(objA[keysA[i]], objB[keysA[i]])) {
      return false;
    }
  }
  return true;
}

console.log(shallowEqual(prevProps, nextProps)); // false, так как user — разные объекты

Применение в React

• React.memo использует поверхностное сравнение для функциональных компонентов.
• shouldComponentUpdate в классовых компонентах позволяет реализовать свою логику сравнения.
• useMemo и useCallback также полагаются на поверхностное сравнение зависимостей.

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