> Что такое React.memo и как он помогает оптимизировать рендеринг (React)

Короткий ответ

React.memo - это higher-order component, который предотвращает повторный рендеринг компонента, если его props не изменились. Он использует поверхностное сравнение (shallow comparison) предыдущих и новых props. Если props остались теми же, React переиспользует последний результат рендеринга, пропуская обновление компонента. Это помогает оптимизировать производительность, особенно для компонентов с тяжелым рендерингом или часто перерисовывающихся из-за изменений в родителе.

Подробное объяснение

React.memo работает как аналог PureComponent для функциональных компонентов. Когда родительский компонент перерисовывается, все его дочерние компоненты по умолчанию также перерендериваются. React.memo оборачивает компонент и добавляет проверку: если props не изменились (с помощью Object.is для каждого поля), React пропускает рендеринг и использует закешированный результат.

Важно понимать, что React.memo проверяет только props, а не состояние или контекст. Если компонент использует useState или useContext, он все равно будет перерендериваться при их изменении. Также поверхностное сравнение не работает для объектов или функций, создаваемых заново при каждом рендере родителя - в таких случаях нужно использовать useMemo или useCallback.

React.memo принимает второй аргумент - функцию кастомного сравнения areEqual(prevProps, nextProps), которая возвращает true, если props равны. Это полезно для глубокого сравнения или специфической логики.

На практике

React.memo стоит применять, когда:

• Компонент часто перерисовывается из-за родителя, но его props редко меняются
• Компонент выполняет тяжелые вычисления или рендерит большие списки
• Компонент отображает статические данные, которые не зависят от частых обновлений

Не стоит использовать React.memo для простых компонентов или там, где props меняются почти каждый раз - проверка может быть дороже самого рендеринга. Также бесполезно оборачивать компоненты с изменяющимся контекстом или состоянием.

Пример кода

JSX
import React, { useState } from 'react';

// Обычный компонент - будет перерендериваться при каждом изменении родителя
const ExpensiveComponent = ({ name }) => {
  console.log('ExpensiveComponent rendered');
  return <div>{name}</div>;
};

// Мемоизированная версия - перерендерится только при изменении name
const MemoizedComponent = React.memo(({ name }) => {
  console.log('MemoizedComponent rendered');
  return <div>{name}</div>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Alice');

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <button onClick={() => setName('Bob')}>Change name</button>
      <ExpensiveComponent name={name} />
      <MemoizedComponent name={name} />
    </div>
  );
}

При клике на кнопку count оба компонента получат одинаковые props, но MemoizedComponent не перерендерится, в отличие от ExpensiveComponent.

Как отвечать на собеседовании

Начни с определения: React.memo - это HOC для мемоизации функциональных компонентов. Объясни, что он предотвращает лишние рендеры при неизменных props. Упомяни поверхностное сравнение и возможность кастомной функции. Приведи пример, когда это полезно (списки, тяжелые компоненты). Важно сказать, что это не панацея - нужно использовать осознанно, так как сама проверка имеет стоимость. Упомяни связь с useMemo и useCallback для стабилизации ссылок.

Что проверяет интервьюер

Интервьюер хочет убедиться, что ты понимаешь механику рендеринга в React и умеешь оптимизировать производительность. Проверяется знание разницы между React.memo, PureComponent и shouldComponentUpdate. Также важно понимание ограничений: поверхностное сравнение, работа с контекстом, необходимость стабилизации props. Ожидается, что ты можешь объяснить, когда React.memo полезен, а когда - излишен.

Типичные ошибки

• Использование React.memo для компонентов с изменяющимся контекстом - это не работает, так как контекст не проверяется
• Забывание стабилизировать функции и объекты в props с помощью useCallback и useMemo - мемоизация становится бесполезной
• Применение React.memo к каждому компоненту без анализа - лишняя работа и потенциальное ухудшение производительности
• Использование глубокого сравнения в кастомной функции areEqual без необходимости - это медленно
• Путаница между React.memo и useMemo - первый для компонентов, второй для значений