Thoughts on directDomUpdates

[zeorin]

@piecyk I've been trying out directDomUpdates, and I have the following questions:

1. Why not accept a directDomContainer option instead tacking a ref callback onto the virtualizer instance? That feel more idiomatic React to me.

2. Would it be possible to have applyDirectStyles bail out early if state.container is null? I.e. skip updating the items elements' styles? This is useful if someone wants to bail out of causing some re-renders but want to implement their own direct DOM updates. In my case I have a table with a subgrid layout, and absolute positioning breaks grid for subgrid items, so I must implement my own, because my element transforms needs to be different.

3. The docs for directDomUpdates are published, but AFAICT it's not in a stable release yet… Is that correct?

[piecyk]

Thanks for the feedback, these are good edge cases.

1. On directDomContainer: we used containerRef to keep the API a bit simpler. I’m not opposed to revisiting the shape.

2. On custom DOM updates: agreed that subgrid/table layouts are a case where the built-in absolute positioning is too opinionated for some use cases. For that kind of advanced layout, you can already implement your own version by patching into onChange and controlling the re-rendering behavior in userland.

3. I don’t fully follow the last point. The published docs describe directDomUpdates as writing item positions and container size directly to the DOM, with containerRef required on the inner size container, and this has landed in the released version.

[zeorin]

2. On custom DOM updates: agreed that subgrid/table layouts are a case where the built-in absolute positioning is too opinionated for some use cases. For that kind of advanced layout, you can already implement your own version by patching into onChange and controlling the re-rendering behavior in userland.

If I set directDomUpdates to true, but don't set the container using containerRef, applyDirectStyles still runs. I.e. even if I try to use your suggested approach of patching into onChange and applying styles directly to the DOM myself, your applyDirectStyles still applies transform to the item elements event though it skips applying the height to the container. Essentially, I'm suggesting this change:

modified   packages/react-virtual/src/index.tsx
@@ -111,10 +111,10 @@ function useVirtualizerBase<
     instance: Virtualizer<TScrollElement, TItemElement>,
   ) => {
     const state = directRef.current
-    if (!state.enabled) return
+    if (!state.enabled || !state.container) return
 
     const totalSize = instance.getTotalSize()
-    if (state.container && totalSize !== state.lastSize) {
+    if (totalSize !== state.lastSize) {
       state.lastSize = totalSize
       const sizeAxis = instance.options.horizontal ? 'width' : 'height'
       state.container.style[sizeAxis] = `${totalSize}px`

An alternative might be to accept false on directDomUpdatesMode, and not apply any styles to anything in that case, letting the user do it themselves. This would be less implicit.

3. I don’t fully follow the last point. The published docs describe directDomUpdates as writing item positions and container size directly to the DOM, with containerRef required on the inner size container, and this has landed in the released version.

I tried updating yesterday using yarn add @tanstack/react-virtual@latest, and pulled a local copy of the repo using git fetch --all --tags but neither gave me a 3.14.x version of the package. It works fine today. 🤷‍♂️

[piecyk]

Fixed via #1201