React Compiler compatibility

[zeorin]

From #1119 (comment):

We still need to address this properly on our side.

@piecyk, I have my own React binding for TanStack Virtual: https://github.com/zeorin/react-hook-tanstack-virtual, which doesn't rely on calling functions during render, or break any rules of React.

It only raises one lint issue, and it's the same issue as in React's own useSyncExternalStoreWithSelector (used internally by e.g. Zustand): https://github.com/react/react/blob/e730b5e65a154bd8fdba26c89288d7d9846b98ab/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js#L54.

I've been using this approach privately for months and it's been working flawlessly for me.

I'd be happy to collaborate or just chat about the approach.

[piecyk]

Yeah, I saw it, great work!

We went back and forth on a similar direction before. I think the useSyncExternalStore / selector approach makes sense conceptually, since the virtualizer is effectively an external mutable store.

The main concern for us is the API / adapter behavior change. Today users mostly receive the virtualizer instance and call methods like getVirtualItems(), while this moves more toward consuming selected snapshot values.

Definitely open to discussing this more.

[zeorin]

It's possible to maintain API compatibility (i.e. calling methods during render) and React Compiler compatiblity.

Essentially, instead of providing the selector function with an instance-like object where the methods have been replaced by the results of calling the methods, it ought to be provided with an object that has the same API as the actual virtualizer instance, but its methods are re-created if the result of calling them have changed. A selector function would be optional, or that part of the API can just be skipped, i.e. just return this object from the hook, always.

The React Compiler memoizes the results of functions called during render, but if the function reference has changed, it will execute it again. I.e. if we are able to use a method's referential stability as a proxy for the result of calling it, we can maintain API compatibility and Rules of React conformance & compiler compatibility.

I'll whip up a draft PR sometime this week so there's some concrete code to reference.

[zeorin]

BTW it's also possible to optimize re-renders even more by usage tracking, like TanStack Query does by default with its query result objects, or react-tracked. I have some experience with this.

However, I'm not sure the extra complexity is worth it in this case, especially since the addition of direct DOM updates.