React Compiler: useVirtual results are cached at their initial values

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.

@tannerlinsley

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

got same problem, very annoying when using react-compiler. My workaround was to save an instance of virtualizer as state when the onChange function is saved, and use that instance in my component instead of the instance returned by the hook.

    const [virtualizer, setVirtualizer] = useState<Virtualizer<HTMLDivElement, Element> | null>(null);

    useVirtualizer({
        count: data.getCount(),
        estimateSize: () => 30,
        getScrollElement: () => scrollableRef.current,
        onChange: (i) => setVirtualizer(i),
    });

   ....
    <>
       virtualizer?.getVirtualItems().map(v => {
          ....
       }
    </>

any official solution or hint?

'use no memo' seems like a reasonable temporary workaround! https://react.dev/learn/react-compiler#something-is-not-working-after-compilation

Specifying initialRect made it work for me

Can you show how exactly did you get it?

export default function VirtualList() {
  // opt out of react compiler
  'use no memo';
}

this works for me

Any news?

Here's a solution that works with TS and pretty strict eslint rules (e.g. where spreading classes is forbidden)

const useVirtual = (options: Parameters<typeof useVirtualizer>[0]) => {
  'use no memo';

  const { getVirtualItems, getTotalSize } = useVirtualizer(options);

  return { virtualItems: getVirtualItems(), totalSize: getTotalSize(), /*...and whatever else you need*/ };
};

But I'd also like to understand how the virtualizer triggers a rerender in the first place if its reference remains stable (which it seems to be according to the compiler output). How does React notice a change if you need to call getVirtualItems during a render to get new items?

The issue could be fixed by returning 'reactive' things directly as new references instead of returning a function to call, e.g returning virtualItems as an array instead of getVirtualItems as a function. This way the virtualizer can remain stable and you can opt into each feature that should rerender your component by simply destructuring what you need.

Something like this

 const { virtualItems, totalSize } = useVirtual({
      count: items.length,
      getScrollElement: () => scrollRef.current,
      estimateSize: () => rowHeight
    });

[compiler]: add `@tanstack/react-virtual` to known incompatible libra…

any news on actually fixing the issue? "use no memo" directive is just a workaround and the related PR seems to have been closed almost a year ago #851

Add handling for compatibility of @tanstack/react-virtual with react …

@eikowagenknecht

Btw, @eikowagenknecht, I’d also add overflow-anchor: none to the scrolling container. Sometimes the browser’s scroll anchoring conflicts with virtualization, so it’s better to disable automatic scroll adjustment.

<div ref={parentRef} style={{ overflow: 'auto', height: 400, overflowAnchor: 'none' }}>

refactor(web): drop CardGrid scrollToGroup lazy-init ref

fix(web): stop admin cards search from freezing the browser on every …

fix(web): stop ~5Hz admin cards idle render loop and typing freeze

refactor(web): stop hiding TanStack hooks from react-compiler

refactor(web): adopt TanStack Virtual directDomUpdates, retire the wr…

fix(web): disable browser scroll anchoring on the window scroll root

[compiler]: add `useWindowVirtualizer` to known incompatible libraries (

feat(react-virtual): add useVirtualizerSnapshot for React Compiler co…

Navigation Menu

Repository navigation

React Compiler: useVirtual results are cached at their initial values #736

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

tanstack-virtual version

TypeScript version

Additional context

Terms & Code of Conduct

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

React Compiler: useVirtual results are cached at their initial values #736

Description

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

tanstack-virtual version

TypeScript version

Additional context

Terms & Code of Conduct

Activity

relsunkaev commented on Jun 15, 2024

relsunkaev commented on Jun 15, 2024

nicolo-danzi-ok commented on Jul 31, 2024

piecyk commented on Dec 12, 2024

Grawl commented on Dec 19, 2024

GrahamQuan commented on Mar 9, 2025

PaloSP commented on Jul 10, 2025

lgrones commented on Jul 12, 2025

ivan-palatov commented on Jan 14, 2026

10 remaining items

piecyk commented on Jun 8, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions