Как React.memo выполняет поверхностное сравнение пропсов?

Как React.memo использует поверхностное сравнение пропсов?

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

Итог: React.memo сокращает количество рендеров за счет поверхностного сравнения пропсов, принимая решение на основе ссылочной идентичности.

Подробный ответ

Основной ответ

В React memo — это HOC (Higher-Order Component), не допускающий повторную отрисовку компонента, когда его пропсы остались прежними. Для этого React применяет поверхностное сравнение (shallow comparison): на верхнем уровне проверяются ссылки на объекты и значения примитивных типов. Если ссылки сохранились, а значения равны, повторный рендеринг не запускается, благодаря чему расходуется меньше ресурсов.

Ключевые моменты

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

Практический контекст

Обычно React.memo применяют с функциональными компонентами в React 16.6+ для оптимизации производительности, в частности в часто обновляемых списках и сложных UI. В React 18 этот принцип не изменился, однако улучшения рендеринга и concurrency-модели могут сделать результат еще заметнее.