When I scroll inside a table, every scroll 'tick' re-renders the entire component
I'm trying to virtualize a table with lots of columns that come from the backend, the number might change with time but I can assume it's always gonna be something like 20.
When I put a console.log inside my component that uses code from the 'virtualized table with infinite scroll' example, I see that for every scroll tick my component gets re-rendered, and even when the component gets first rendered it re-renders at least three times, my table is inside an expandable drawer, and when I try to expand/collapse it, I get something like 50 additional re-renders. What am I doing wrong?
This is the code I have for the columns, I'm using ListingItemHelper which has the different component options for a cell based on the type of column.
const allColumnsWithVinFirst = useMemo<ColumnDef<Listing>[]>(() => {
const columnsWithAccessorKey = allColumns.map((column) => ({
accessorKey: ColumnType[column],
header: () => <ListTitle>{t(segments.listings.${columnsData[column]?.key})}</ListTitle>,
cell: (listing) => {
const index = listing.row.index;
return (
<ListingItemHelper
id={${ColumnType[column]}-${index}}
index={index}
column={column}
node={listing.row.original}
/>
);
},
}));
And this is my code for creating the table
const flatData = useMemo(() => listings ?? [], [listings]);
const table = useReactTable({
data: flatData,
columns: allColumnsWithVinFirst,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
});0 Replies