Сколько аргументов в React.memo?
Рендеринг и производительность
У React.memo два аргумента: компонент (обязательный) и функция сравнения props (необязательная).
Сигнатура
const MemoizedComponent = React.memo(Component, arePropsEqual?);Первый аргумент — компонент
Любой компонент (функциональный или классовый), который нужно мемоизировать. React.memo возвращает обёртку: при рендере родителя props сравниваются с прошлыми, и если равны — рендер пропускается, используется прошлый результат.
По умолчанию сравнение поверхностное: каждый проп через Object.is (примитивы по значению, объекты/функции по ссылке).
Второй аргумент — кастомный компаратор
const Chart = React.memo(ChartInner, (prevProps, nextProps) => {
// true → props «равны», рендер ПРОПУСТИТЬ
// false → рендерить заново
return prevProps.data.revision === nextProps.data.revision;
});Принимает prevProps и nextProps, возвращает boolean. Внимание на семантику: true = «не рендерить» — противоположно shouldComponentUpdate, где true означало «рендерить».
Когда нужен: сравнение по выбранным полям (глубокие объекты с известным «признаком версии»), намеренное игнорирование части props. Осторожно: ошибочный true «замораживает» компонент с устаревшими данными.
Частые заблуждения
- Компаратор вызывается только при рендере родителя — от обновлений собственного state/контекста memo не защищает.
- Глубокое сравнение в компараторе (deepEqual) может стоить дороже самого рендера — обычно признак, что проблема в нестабильных ссылках, а не в memo.
Коротко для собеседования
Два аргумента: компонент и опциональная функция сравнения (prev, next) => boolean, где true = пропустить рендер (обратная семантика shouldComponentUpdate). Без второго аргумента — поверхностное сравнение props по Object.is.