React: Как оптимизировать создание и уничтожение 200 элементов одним щелчком мыши?

Question

У меня есть сетка квадратов, где каждый квадрат представляет транзакцию.

Эта сетка может расти до 200 квадратов. Поэтому я добавил нумерацию страниц с ограничением в 2 страницы. Каждая страница имеет максимум 100 квадратов.

Вот код этой сетки:

const BlockCard = ({ blockNumber, timestamp, transactions }) => {
  ...
  const [isViewingFirstPage, setIsViewingFirstPage] = useState(true);

  ...

  const paginatedTransactions = isViewingFirstPage
    ? transactions.slice(0, 100)
    : transactions.slice(100, 200);

  return (
    <ThemeProvider theme={theme}>
      <CardWrapper>
        ...
        <CardGrid>
          {paginatedTransactions.map(({ hash, from, to, value }) => (
            <TransactionSquare
              key={hash}
              hash={hash}
              from={from}
              to={to}
              value={value}
              ethToUsdPrice={ethToUsdPrice}
            />
          ))}
        </CardGrid>
        <MoreTransactionsButton
          hide={transactions.length <= 100}
          onClick={() => setIsViewingFirstPage(!isViewingFirstPage)}>
          {isViewingFirstPage ? (
            <React.Fragment>
              <ButtonText>{transactions.length - 100} more TX</ButtonText>
              <CaretWrapper>
                <Caret src={ICON_CARET_RIGHT} />
              </CaretWrapper>
            </React.Fragment>
          ) : (
            <ButtonText>Back</ButtonText>
          )}
        </MoreTransactionsButton>
        ...
      </CardWrapper>
    </ThemeProvider>
  );
};

Вы можете увидеть весь файл / приложение здесь: https://github.com/EdmundMai/ethereum-explorer/blob/master/src/components/homepage/BlockCard.js#L80

Я заметил, что при нажатии MoreTransactionsButton для загрузки второй страницы транзакций требуется значительное время для согласования. Браузеру необходимо 1) уничтожить 100 квадратов, а затем 2) создать до 100 дополнительных квадратов.

По общему признанию, у меня нет большого опыта отладки в React. Я использую React 16+ и похоже, что у меня есть только вкладка Chrome Performance для работы.

Был бы более эффективный способ написать это?

Вот ссылка на мой репозиторий, особых инструкций по установке нет, просто npm install; npm start, если вы хотите вытащить его и запустить локально: https://github.com/EdmundMai/ethereum-explorer