Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React 19 issue with useWindowVirtualizer #743

Open
2 tasks done
fat opened this issue Jun 27, 2024 · 3 comments · May be fixed by #851
Open
2 tasks done

React 19 issue with useWindowVirtualizer #743

fat opened this issue Jun 27, 2024 · 3 comments · May be fixed by #851

Comments

@fat
Copy link

fat commented Jun 27, 2024

Describe the bug

Sorry for the drive by issue… 

We ran into a problem with react 19 today that was a pita to track down. So dropping it here incase it's useful to anyone.

We had a simple useWindowVirutalizer in a client component in next.js w/ react 19 (like this):

const virtualizer = useWindowVirtualizer({
  count: branches.length,
  estimateSize: () => 66,
  overscan: 5,
  scrollMargin: listRef.current?.offsetTop ?? 0,
});

and virtualizerRef.getVirtualItems() was being hoisted / memo'd by the compiler in such a way that it was always returning 0 for getVirutalItems.

To fix it we just dropped the virtualizer in a ref…

	const virtualizer = useWindowVirtualizer({
		count: branches.length,
		estimateSize: () => 66,
		overscan: 5,
		scrollMargin: listRef.current?.offsetTop ?? 0,
	});

	// we do this because react 19 was optimzing it away
	const virtualizerRef = useRef(virtualizer);
	
	
	
	virtualizerRef.current.getVirtualItems() // etc…

Your minimal, reproducible example

n/a

Steps to reproduce

Don't have time to spin up a test case sorry!

Expected behavior

Expected getVirtualItems() to return items.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macos, chrome, react 19

tanstack-virtual version

3.7.0

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.
@Prains
Copy link

Prains commented Jul 3, 2024

same issue here, but droppind a virtualizer in a ref does not helps

@izakfilmalter
Copy link

Running into the same issue. useRef seems to work for now for us.

@eqqe
Copy link

eqqe commented Nov 14, 2024

It gives me an issue with eslint however.

Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)eslint(react-compiler/react-compiler)

Edit: it might be removed in a PR
https://github.com/facebook/react/pull/30843/files

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants