Sobes.tech
Middle+

Escreva uma implementação abstrata do componente Child com memoização usando React.memo. Qual é o segundo argumento que o React.memo aceita?

sobes.tech IA

Resposta da IA

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 пропустит ререндер.