Incorrect range when changing lanes

[Arjan-Zuidema]

Describe the bug

From version 3.13.3 the range calculations changed in this commit. It now returns the complete range when the lanes in useVirtualizer are changed.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/tankstack-virtual-range-extractor-p6jf47

Steps to reproduce

1. Start scrolling and the range gets updated correctly
2. Toggle lanes (lanes change from 5 to 10) and the range changes to 0-9999
3. Update in package.json @tanstack/react-virtual to 3.13.2
4. The problem is fixed again.

Expected behavior

Ranges should be correct

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Tested in macOS, Safari and Chrome

tanstack-virtual version

3.13.9

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [x] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[Yaropolki4]

The problem is still relevant. I couldn't think of anything better than creating a separate component for each lane.

[Yaropolki4]

Or you can use something like this

const [ref, { width }] = useMeasure<HTMLDivElement>();
  const lanes = Math.floor(width / COLUMN_WIDTH);

  return (
    <StatusRenderer status={status} error={<ServerErrorScreen />} loading={<StrategyTableSkeleton />}>
      {data?.length ? (
        <MultiLaneVertualList
          parentRef={ref}
          items={data}
          renderItem={renderStrategy}
          getItemKey={(strategy) => strategy.id}
          lanes={lanes}
          className="absolute"
          // TODO вынужденная мера из-за бага в tanstack virtualizer https://github.com/TanStack/virtual/issues/1012
          key={lanes}
        />
      ) : (
        <EmptyScreen
          icon={<ListTwoColumn width={24} height={24} viewBox="0 0 24 24" color="secondary" />}
          title={t("strategies_list.no_strategies_title")}
          description={t("strategies_list.no_strategies_description")}
        />
      )}
    </StatusRenderer>
  );