Sobes.tech
Назад к вопросам
Middle+
2

Напиши абстрактную реализацию компонента Child с мемоизацией через React.memo. Какой второй аргумент принимает React.memo?

Компании, где спрашивали
IT OneIT One

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

sobes.tech AI

React.memo — это HOC (Higher Order Component), который мемоизирует функциональный компонент, предотвращая его повторный рендер, если пропсы не изменились.

Второй аргумент React.memo — это функция сравнения (areEqual), которая принимает (prevProps, nextProps) и должна вернуть true, если пропсы считаются равными (то есть ререндер не нужен), и false — если нужно обновить компонент.

Пример абстрактного компонента Child с React.memo:

import React from 'react';

const Child = React.memo(function Child({ data }) {
  console.log('Child render');
  return <div>{data.text}</div>;
}, (prevProps, nextProps) => {
  // Сравниваем только поле text
  return prevProps.data.text === nextProps.data.text;
});

export default Child;

В этом примере компонент Child будет перерендериваться только если поле data.text изменится. Если пропсы равны по логике функции сравнения, React пропустит ререндер.