Ag-Grid Slow с клеточными визуализаторами

Question

Я использую средства рендеринга ячеек на основе React для рендеринга компонента Material UI для 1 столбца. Я заметил, что это невероятно медленно даже при небольшом количестве данных (возможно, 30 элементов), прокрутка действительно запаздывает.

В их документах говорится, что использование Framework в Cell Renderers добавляет снижение производительности, но я подумал, что это может быть с значительное количество строк, это меньше 25.

Сетка:

              <AgGridReact
                columnDefs={columns}
                rowData={data?.edges?.map(edge => edge?.node)}
                defaultColDef={{
                  ...{
                    filter: true,
                    sortable: true,
                    resizable: true,
                    editable: false,
                    headerHeight: 12,
                    cellClass: 'no-border',
                    suppressNavigable: true
                  },
                  ...options?.columnDefaults
                }}
                headerHeight={35}
                frameworkComponents={options?.frameworkComponents}
                quickFilterText={filter}
                {...props}
              />

столбцы

  const columns = [
    {
      headerName: '',
      width: 80,
      cellRenderer: 'RowActions',
      cellRendererParams: {
        handleClone,
        handleEdit,
        handleDelete,
        handlePublish,
        data
      }
    }]

RowActions

import React, { memo, useState } from 'react';
import { IconButton, Menu, MenuItem, Button } from '@material-ui/core';
import { Menu as MenuIcon, CheckCircle, Publish } from '@material-ui/icons';

export const RowActions = memo(
  ({ handleClone, handleDelete, handleEdit, data: { qaSessionId, status } }) => {
    const [anchorEl, setAnchorEl] = useState(null);

    const handleClick = event => {
      setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
      setAnchorEl(null);
    };

    return (
      <>
        <IconButton
          aria-label="more"
          aria-controls="long-menu"
          aria-haspopup="true"
          onClick={handleClick}>
          <MenuIcon />
        </IconButton>
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          keepMounted
          open={Boolean(anchorEl)}
          onClose={handleClose}>
          {/* YOU CAN ONLY EDIT A DRAFT ITEM  */}
          {status !== 'production' && (
            <MenuItem
              onClick={() => {
                handleEdit(qaSessionId);
                handleClose();
              }}>
              Edit
            </MenuItem>
          )}

          {/* YOU CAN ONLY CLONE AN ITEM IN PRODUCTION */}
          {status === 'production' && (
            <MenuItem
              onClick={() => {
                handleClone(qaSessionId);
                handleClose();
              }}>
              Clone
            </MenuItem>
          )}
          <MenuItem
            onClick={() => {
              handleDelete(qaSessionId);
              handleClose();
            }}>
            Delete
          </MenuItem>
        </Menu>
      </>
    );
  }
);

Как я прокрутка Я вижу, как через несколько секунд отображаются компоненты реагирования / средства визуализации ячеек, и я также получаю: [Violation] 'setTimeout' handler took <N>ms при прокрутке