Лучший способ справиться с повторным рендерингом в повторно используемых компонентах

Question

Я хотел бы создать свои собственные повторно используемые компоненты, которые можно использовать в других проектах ( в виде пакета npm ).

Предположим, что повторно используемые компоненты структурированы следующим образом:

ui
├───card.jsx
├───card-board.jsx
├───card-body.jsx
├───sliding.jsx
├───sliding-board.jsx
├───sliding-body.jsx
├───img.jsx
├───remove.jsx
├───title.jsx
└───index.jsx

Пример использования:

this.state.Cards.map(card => {
  return (
    <Card key={card.id}>
      <Remove onRemove={() => this.handleCardRemove(card.id)} />
      <Img />
      <CardBody>
        <Title>{card.title}</Title>
        <p>{card.body}</p>
      </CardBody>
    </Card>
  );
});

Это прекрасно работало, пока количество карт не было перенаселено . Все функции обновления и удаления стали очень медленными из-за ненужного повторного рендеринга на том же статическом содержимом.

И, конечно, это можно оптимизировать, проверив предыдущий и новый реквизит на компоненте карты , как показано ниже:

import React from "react";

import { CardContainer } from "./card.style";
import { deepCompare } from "../../utils/";

const Card = ({ children }) => {
  return <CardContainer>{children}</CardContainer>;
};

// if return true - Card component won't re-render
const arePropsEqual = (preProps, newProps) => {
  return deepCompare(preProps, newProps); // <- function that compare the nested props.
};

export default React.memo(Card, arePropsEqual);

Как видите. Я использую React.memo для управления повторным рендерингом, и я также реализовал функцию deepCompare , которая будет возвращать true, если оба входных параметра одинаковы.

Итак, я хотел бы знать, как лучше всего решить эту проблему в больших масштабах, где много компонентов (возможно, вложенных).

И, следует ли применять вышеуказанное решение (React.memo) к каждому отдельному пользовательскому компоненту, который я создал? Поскольку некоторые элементы пользовательского интерфейса могут использоваться по отдельности, независимо от того, какой контейнер используется, например: Img, Remove и Title.