Excessive re-renders when scrolling

[christiankaindl]

Describe the bug

Scrolling a virtualized list seems to cause a 2+ re-renders on every scroll event. In the linked Sandbox, up to 90 re-renders are triggered before any items are added or removed from the virtual list.

Possibly related

• Possible performance improvement when using rangeExtractor #212
• slow performance compared to 2.10.4 #331

Example of react-virtual 2.8, which does not have this problem: https://codesandbox.io/s/react-virtual-2-8-no-re-renders-xlmned

I would love to help debug the issue, but aren't that experienced with monorepo setups yet. Any guidance is appreciated :)

Your minimal, reproducible example

https://codesandbox.io/s/react-virtual-excessive-re-renders-iqtyuf?file=/src/App.js

Steps to reproduce

1. Scroll the list continuously (e.g. with a trackpad) or use the button "Scroll 1 row"
2. Observe the console.log's in the console, lots of re-renders are logged

Expected behavior

I would expect to only see re-renders when items are added or removed from the virtualized list.

How often does this bug happen?

Every time

Screenshots or Videos

Screen.Recording.2022-07-29.at.22.33.11.mov

Platform

macOS 12.4

Tested on latest Firefox and Safari

tanstack-virtual version

3.0.0-beta.13

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• 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.

[wuarmin]

Fixing this would be awesome!

[christiankaindl]

Managed to set up the project locally and did some debugging. I think the reason for the many re-renders is that somewhere the memoization is invalidated on every scroll event.

First, scrollOffset is set on every scroll event here:

virtual/packages/virtual-core/src/index.ts

Lines 336 to 339 in 6c3d6ca

	this.options.observeElementOffset(this, (offset) => {
	this.scrollOffset = offset
	this.notify()
	}),

which is then used as a memoization key to calculateRange()

virtual/packages/virtual-core/src/index.ts

Line 388 in 6c3d6ca

() => [this.getMeasurements(), this.getSize(), this.scrollOffset],

That would not be a problem in and of itself, the issue is that calculateRange() always returns a new object so that the memoization of getIndexes() is invalidated, and then getVirtualIems() as well. So I think a fix would consist of making sure that calculateRange() returns the same object when the range is the same.

[christiankaindl]

I was wrong. Well, kinda... the memoization indeed wasn't working, but that wasn't the cause for the React re-renders :D found the root cause now and fixed it locally. Will submit a MR shortly!

The issue is with line 338, which calls the onChange callback for every scroll event (disguised as this.notify() here).

virtual/packages/virtual-core/src/index.ts

Lines 336 to 339 in 6c3d6ca

	this.options.observeElementOffset(this, (offset) => {
	this.scrollOffset = offset
	this.notify()
	}),

That handler is then used in the react-virtual adapter to trigger re-renders:

virtual/packages/react-virtual/src/index.tsx

Lines 27 to 30 in 5f0dfe9

	onChange: (instance) => {
	rerender()
	options.onChange?.(instance)
	},

The fix in my opinion is to only call onChange() handler when the range of the rendered items changes, not on every scroll event.