title: Ag-Grid Slow with Cell Renderers
body: <p>I'm using React based Cell Renderers to render out a Material UI component for 1 column. I've noticed it's incredibly slow even with little data (maybe 30 items), scrolling is really laggy.</p>
  
  <p>Their docs say that using a Framework in Cell Renderers adds a performance hit but I thought it might be with a significant number of rows, this is less than 25. </p>
  
  <p>Grid: </p>
  
  <pre><code>              &lt;AgGridReact
                  columnDefs={columns}
                  rowData={data?.edges?.map(edge =&gt; 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}
                /&gt;
  </code></pre>
  
  <p>columns </p>
  
  <pre><code>  const columns = [
      {
        headerName: '',
        width: 80,
        cellRenderer: 'RowActions',
        cellRendererParams: {
          handleClone,
          handleEdit,
          handleDelete,
          handlePublish,
          data
        }
      }]
  </code></pre>
  
  <p>RowActions </p>
  
  <pre><code>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 } }) =&gt; {
      const [anchorEl, setAnchorEl] = useState(null);
  
      const handleClick = event =&gt; {
        setAnchorEl(event.currentTarget);
      };
  
      const handleClose = () =&gt; {
        setAnchorEl(null);
      };
  
      return (
        &lt;&gt;
          &lt;IconButton
            aria-label="more"
            aria-controls="long-menu"
            aria-haspopup="true"
            onClick={handleClick}&gt;
            &lt;MenuIcon /&gt;
          &lt;/IconButton&gt;
          &lt;Menu
            id="simple-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}&gt;
            {/* YOU CAN ONLY EDIT A DRAFT ITEM  */}
            {status !== 'production' &amp;&amp; (
              &lt;MenuItem
                onClick={() =&gt; {
                  handleEdit(qaSessionId);
                  handleClose();
                }}&gt;
                Edit
              &lt;/MenuItem&gt;
            )}
  
            {/* YOU CAN ONLY CLONE AN ITEM IN PRODUCTION */}
            {status === 'production' &amp;&amp; (
              &lt;MenuItem
                onClick={() =&gt; {
                  handleClone(qaSessionId);
                  handleClose();
                }}&gt;
                Clone
              &lt;/MenuItem&gt;
            )}
            &lt;MenuItem
              onClick={() =&gt; {
                handleDelete(qaSessionId);
                handleClose();
              }}&gt;
              Delete
            &lt;/MenuItem&gt;
          &lt;/Menu&gt;
        &lt;/&gt;
      );
    }
  );
  </code></pre>
  
  <p>As I scroll I visibly see the react components / cell renderers showing after a few seconds 
  I also get: <code>[Violation] 'setTimeout' handler took &lt;N&gt;ms</code> while scrolling</p>