Лучшие подходы и решения для уменьшения кода на React. Часть 2

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

Мемоизация работает:

const MemoComponent = React.memo(Component);

return (
  <ui>
    {items.map((item) => (
      <MemoComponent>{item}</MemoComponent>
    ))}
  </ui>
);

Мемоизация НЕ работает:

const MemoComponent = React.memo(Component);

return (
  <ui>
    {items.map((item) => (
      <MemoComponent><span>{item}<span></MemoComponent>
    ))}
  </ui>
);

Кейс, когда в качестве children в компонент прокидывается примитивный тип, как мне кажется, довольно редкий, чаще всё-таки рендерится какой-то кастомный компонент, куда item передаётся через props в том или ином виде – поэтому стоит помнить, что тогда мемоизация не будет работать.

Был бы намного познавательнее формат «делай вот так, потому что в этом есть вот такие плюсы», как немного в пункте про классовые и функциональные компоненты. Сейчас это выглядит как информация, взятая с потолка, т.е. без объяснения причин.

P.S. Если что я не имею в виду, что все эти советы ненужные) Спасибо за перевод!)

Я так понимаю, единственный минус использования css/scss/less - это то что придёться его отдельно настраивать, например, в webpack?