React.memo и недействительность в функциональном компоненте не делают недействительными

Question

У меня есть функциональный компонент React, обернутый React.memo следующим образом

const SpeakerDetail = React.memo(
  ({ record, prop1 }) => {...

Когда я вызываю этот компонент, я делаю это так

const record = {prop1: 'abcd', prop2: 'efgh', prop3: 'ijkl'};
const Speakers = () => {
   ...
   return(
      <SpeakerDetail record={record} prop1={record.prop1}></SpeakerDetail>
   )...

Предполагая, что мой prop1 действительно меняется между рендерами, приведенный выше код работает так, как ожидалось, что означает, что React.memo создает новую копию и не использует ее кешированную версию.

Проблема в том, что если я явно не передаю prop1 в качестве отдельного параметра, версия кеша React.memo не распознает изменение свойства записи.

Есть ли способ не передавать это избыточное свойство, чтобы React.memo пересчитывал?

Это похоже на проблему с глубоким / неглубоким копированием, но я не уверен.

Answer 1

памятка HOC

В memoHOC просто выполняет поверхностную проверку на равенство переданных свойств. Вы можете указать функцию равенства в качестве второго параметра дляmemo HOC, который принимает предыдущий и следующий реквизиты, который возвращает true если сравнение вернет тот же результат, иначе false.

const SpeakerDetail = React.memo(
  ({ record, prop1 }) => {...},
  (prevProps, nextProps) => {
    if (prevProps.record.prop1 !== nextProps.record.prop1) return false;
    return true;
  },
);