Запретить компоненту / чистому компоненту со стилизованными компонентами повторно отображать все элементы после изменения состояния

После добавления компонентов стиля в этот пример мы заметили, что наш компонент списка обновляет все, когда изменяется только один элемент в состоянии.

Подсветки отрисовки списка (из инструментов разработки React) чрезмерны при добавлении / удалении одной записи. Удаляется / добавляется один элемент, затем выделяются все элементы.

образцы кода

• github: https://github.com/chancesmith/reactjs-optimize-list-updates/tree/master/src
• codeandbox: https://codesandbox.io/s/wn45qw44z5

Вот пример правильного компонента списка (CategoryizedList.js)

import styled from "styled-components";

const Item = styled.li`
  color: #444;
`;

class CategorizedList extends PureComponent {
  render() {
    return (
      <div>
        {this.props.categories.map(category => (
          <ul>
            <li key = {this.props.catStrings[category]}>
              {this.props.catStrings[category]}
            </li>
            <ul>
              {this.props.items.map((item, index) =>
                item.category === category ? (
                  <div key = {item.label + index}>
                    <Item>{item.label}</Item>
                  </div>
                ) : null
              )}
            </ul>
          </ul>
        ))}
      </div>
    );
  }
}

Предпочтение

Я бы предпочел использовать PureComponent, чтобы shouldComponentUpdate()обрабатывается автоматически.

Вопрос

Как мы можем убедиться, что повторно визуализируются только измененные объекты в состоянии items?