Избегайте повторного рендеринга компонента, который содержит дочерние реквизиты

Question

Как избежать повторного рендеринга компонента, имеющего children props . React.memo похоже работает только на обычных реквизитах

const FormGroup = ({
  children
}) => {
  return (
    <div>
      {children}
    </div>
  )
}

export default React.memo(FormGroup)

Answer 1

React.memo принимает второй аргумент, который позволяет вам контролировать, как и какие реквизиты сравниваются.

function FormGroup(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
  return true;
}
export default React.memo(FormGroup, areEqual);

Примечание из документов :

Это Метод существует только для оптимизации производительности. Не полагайтесь на него, чтобы «предотвратить» рендеринг, так как это может привести к ошибкам.

Answer 2

React.memo и React.PureComponent не могут оптимизировать по умолчанию, если пропущен дочерний объект. Это связано с тем, что при каждом повторном рендеринге родительского объекта создается новый экземпляр объекта «Дети» и, следовательно, ссылка теряется.

Это подробно объясняется в этом выпуске github

Также, как Дан Абрамов упомянул в одном из комментариев в ссылке на github

Вы можете выбрать реализацию пользовательского shouldComponentUpdate для React.Component или areEqual для React.memo. Однако выполнение этого часто может быть непроизводительным и не обязательно более выгодным, чем сам рендеринг

Также рендеринг является дешевым и быстрым, и можно просто выполнить повторный рендеринг для простого компонента