Мемоизированные компоненты перерисовывают своих детей

Question

Я использую реакцию 16.6 с пользовательским интерфейсом материала, и у меня очень плохое время, пытаясь избежать ненужных повторных визуализаций.Я перепробовал почти все, о чем мог думать, и дочерние компоненты материала пользовательского интерфейса перерисовывались при каждом взаимодействии с пользователем.Неважно, что Propertis буквально одинаковы, они перерисовываются.

Я пытался использовать memo froom реакции, и корневой компонент запоминался и избегал ненужных повторных визуализаций, но даже с этим дочерний элементкомпоненты распознаются как повторно обработанные всеми инструментами реагирования, которые я пробовал (инструменты разработчика и почему вы обновили пакет)

Вот простой фрагмент:

import React, { PureComponent, memo } from 'react';

import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';

const rowText = ({ title, artist }) =>
  console.log('Row text render') || (
    <ListItemText primary={title} secondary={artist} />
  );

const RowText = memo(rowText);

const row = ({ selected, song, onSelect, favorite, LikeButton }) =>
  console.log('Row rendered') || (
    <ListItem
      button
      selected={selected === song.title}
      onClick={() => onSelect(song.title)}
    >
      {selected === song.title && <PlayArrowIcon color="primary" />}
      <RowText {...song} />
      <ListItemSecondaryAction>
        <LikeButton liked={favorite} title={song.title} />
      </ListItemSecondaryAction>
    </ListItem>
  );

row.displayName = 'Row';

const Row = memo(row);

Это регистрируетна консоль только один раз Row rendered Row text render, но сообщается, что остальные элементы, такие как ListItemSecondaryAction ListItemt и ListItemText, будут перерисованы.Как это возможно ?Я ожидал, что memoize вернет точно такой же объект, но избегая повторных отрисовок

Редактировать: Я попробовал более радикальное решение, о котором я могу подумать:

class Row extends Component {
  shouldComponentUpdate = (nextProps, nextState) => {
    return false;
  };

Даже при этом я получаю сообщенияпредотвратимого повторного рендеринга для всех дочерних элементов компонента

Даже на самом простом компоненте (с одним компонентом MUI) и радикале не меняйте ни в коем случае, я получаю ненужные повторные рендеры

class RowText extends Component {
  shouldComponentUpdate = (nextProps, nextState) => {
    return false;
  };

  render() {
    const { title, artist } = this.props;
    return <ListItemText primary={title} secondary={artist} />;
  }
}

Это должно быть какая-то ошибка в материале. Пользовательский интерфейс

РЕДАКТИРОВАТЬ

Это происходит только для компонента ListItem и его дочерних элементов, поэтому это должно быть некотороевид ошибки на них.Я попробовал те же методы с другими компонентами, и дети не будут перерисованы, если они не должны.