How to memoize rows correctly with @tanstack/react-table

[jonahallibone]

My code below is pretty representative of how I am rendering my table in my app. My problem comes when I wrap memo(GeneralTableRows), I suddenly lose access to all state updates in the table. Things like getIsSelected() etc, just cease to function. I assume it's because of the memoized nature of useReactTable having a stable reference. This makes sense, sort of, but it causes all sorts of problem relating to optimizing render updates with @tanstack/react-virtual. Without memoizing each row, every single row updates on every scroll, which causes terrible rendering performance as my rows have somewhat complex components in the cell. The desired result is that the already rendered rows do not rerender on each scroll, and only rerender when:

a) interacted with
b) rendered into the list
c) unmounted from the screen.

Any help on this would be great.

As an aside, I have managed to get it to the point where the rows but not the cells rerender, however, this still seems suboptimal and also feels like I must be doing something wrong. My instinct is that my keys are wrong inside mapping of the rows, but I can't be sure.

const GeneralTableRows = <T>({
  rows,
}: GeneralTableRowsProps<T>) => {
  const rowCount = rows.length;

  const rowVirtualizer = useVirtualizer({
    count: rowCount,
    getScrollElement: () => tableContainerRef?.current ?? null,
    getItemKey: (index) => rows[index]?.id ?? index,
    estimateSize: () => 37,
  });

  const width = ${
    table.getTotalSize() - table.getVisibleLeafColumns().length
  }px`;

  const totalSize = rowVirtualizer.getTotalSize();

  const virtualRows = rowVirtualizer.getVirtualItems();

  return virtualRows.map((virtualRow) => {
    return (
     <GeneralTableRows
       rows={rows}
       key={virtualRow.key}
       virtualRow={virtualRow}
       measureElement={rowVirtualizer.measureElement}
       start={virtualRow.start}
     />
    );
  });
};

[piecyk]

First getItemKey should be stale, it's part of re-create the measurements array. If you could create small codesandbox then i can have a look

As an aside, I have managed to get it to the point where the rows but not the cells rerender, however, this still seems suboptimal and also feels like I must be doing something wrong.

Overall in table most cases you want to memozie rows.

[piecyk]

@jonahallibone yes we need to update docs, getItemKey needs to be stale, so by this i meant wrapping it with react useCallback as this should not change on every re-render.

[jonahallibone]

Do you have a quick snippet you could add as an example? Just to clarify your meaning?

[obinmatt]

@piecyk thank you!! adding the callback made a huge difference

[obinmatt]

@jonahallibone you want your getItemKey to be React.useCallback((index: number) => rows[index]?.id ?? index, [rows])