React Compiler: useVirtual results are cached at their initial values
gdorsi opened this issue · 3 comments
Describe the bug
An usage of useVirtual
gets compiled by React Compiler into something like this:
const virtualizer = (0,
_tanstack_react_virtual__WEBPACK_IMPORTED_MODULE_9__.useVirtualizer)(t3);
let t4;
if ($[9] !== virtualizer) {
t4 = virtualizer.getVirtualItems();
$[9] = virtualizer;
$[10] = t4;
} else {
t4 = $[10];
}
Since the virtualizer ref never changes, the virtual items never get updated.
Not sure if this should be a Tanstack Virtual issue or React Compiler needs to apply less assumptions when caching values, but thought that would be good to flag the problem here.
Wrapping useVirtual
into something like this fixes the issue:
const useVirtualWrapper = (...args) => {
'use no memo';
return { ...useVirtual(...args) };
}
Your minimal, reproducible example
https://codesandbox.io/p/devbox/runtime-dew-9rlvm7
Steps to reproduce
- Open the example (forked from https://tanstack.com/virtual/latest/docs/framework/react/examples/fixed)
- The virtual lists are rendering no items
Expected behavior
The UI should be the same as https://tanstack.com/virtual/latest/docs/framework/react/examples/fixed
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- MacOS, Chrome and Firefox
tanstack-virtual version
3.5.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.
Similar thing happens if the component is wrapped in memo
. @tannerlinsley this error only shows up with strict mode off (i.e. in production).
Specifying initialRect
made it work for me