I am currently utilizing react-virtualized in conjunction with material-ui table cells to establish a table featuring virtual scrolling. Although everything appears to be functioning correctly, I am experiencing intermittent performance slowdowns when navigating the table in both upward and downward directions. Upon inspecting the developer console, I noticed several warnings being displayed:
[Violation] 'requestAnimationFrame' handler took ~116ms
Additionally, there is another warning that reads:
[Violation] 'scroll' handler took ~150ms
These messages have caught my attention.
const MyTable: React.FunctionComponent<Props> = (props: Props) => {
//props, styles, table content fetching here
const headerRenderer = () => {
return (
<MyHeaderCell
styleClass={classes.headerCell}
content={"Header"}
/>
);
};
const cellRenderer = (rendererProps) => {
return (
<MyContentCell
styleClass={classes.tableCell}
rendererProps={rendererProps}
/>
);
};
const renderContent = () => {
return (
<InfiniteLoader
isRowLoaded={isRowLoaded}
loadMoreRows={loadMoretableItems}
rowCount={tableItemsQuantity}
>
{({ onRowsRendered}) => (
<AutoSizer>
{(sizerProps: IAutoSizerProps) => {
const { height, width } = sizerProps;
return (
<Table
onRowsRendered={onRowsRendered}
width={width}
height={height}
rowHeight={rowHeight}
rowCount={tableItems.length}
rowGetter={getCurrentRow}
overscanRowCount={5}
headerHeight={rowHeight}
rowClassName={classes.flexContainer}
noRowsRenderer={noRowsRenderer}
>
<Column
dataKey={nameof<MyTableItem>((o) => o.id)}
width={width}
headerClassName={clsx(classes.header, classes.column)}
headerRenderer={headerRenderer}
className={clsx(classes.header, classes.column)}
cellRenderer={cellRenderer}
/>
<!-- Additional columns go here -->
</Table>
);
}}
</AutoSizer>
)}
</InfiniteLoader>
);
};
return (
<Grid item container direction={"column"} className={classes.root}>
<h4>{Translate.getString("My Table Items")}</h4>
<Grid item className={classes.tableContainer}>
{renderContent}
<LoaderBlock isLoading={showTableLoader}/>
</Grid>
</Grid>
);
};
export { MyTable };How can I enhance the performance of my table for better functionality?