Impossible to prevent rerendering entire list of items on scroll

[jonahallibone]

I am using the following in conjunction with @tanstack/table and I am finding it impossible to render my rows without rerendering the entire visible list on each scroll event. Normally, I'd solve this by memoizing some wrapper/row/cell, however, I am finding that hard as well because it is causing my component containing useVirtualizer to remount the children, meaning that the comparison in memo is never stale, and prev, next comparisons are always equal because it's a freshly mounted render. Any kind of example where this is not the case would be greatly appreciated.

  const { rows } = table.getRowModel();

  const tableContainerRef = useRef<HTMLDivElement>(null);

  const rowVirtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: useCallback(() => tableContainerRef.current, []),
    getItemKey: useCallback(
      (index: number) => rows[index]?.id ?? index,
      [rows]
    ),
    estimateSize: useCallback(() => 37, []),
    overscan: 15,
  });