Recommended pattern for a grid of dynamic, but uniformly-sized items?

[matthewhuang97]

Hi there, thanks for this library! Our team has a use case where we...

• Have a grid of items
• When the grid / window is resized, these items dynamically change size
• Though dynamic, all items are uniformly-sized with respect to one another

We currently have a setup with TanStack virtual where we:

• Dynamically compute the correct value for the lanes option by measuring & computing how many items fit on each row
• Re-measuring the first item upon any layout changes, storing that as state, and passing that into the estimateSize option

(looks a bit like this)

  const [estimateSize, setEstimateSize] = useState(...)
  ...
  const virtualizer = useVirtualizer({
    estimateSize: () => estimateSize,
    lanes: computeNumLanes(...),
  })

This mostly works well, except the computed value of virtualizer.getTotalSize() is incorrect. It seems to be using stale values of estimateSize to compute the measurement of each item instead of the values we update in state during resizing.

The reason we're not doing fully-dynamic measurements as per the docs, is because it seemed like overkill. We know all our items are the same height, so we could avoid any performance hits by just measuring the first item, and then telling the virtualizer that all of our items are of this size. Maybe this optimization isn't actually useful though, and would love someone with more familiarity here to let me know if that's the case!

It seems to me like perhaps my mental model of estimateSize is incorrect. I thought it would update reactively if the value was changed, but it looks like it's only used initially to do the first layout (especially if dynamic measurements aren't supplied).

Does anyone have guidance on the best patterns to support our use case? Thanks in advance!

[niikeec]

would this help?

[stuartambient]

would this help?

I have an infinite scroll with somewhat complex items, images with an overlay activated on hover that includes some other elements. Anyway, it works fine except needs virtualization but trying to do something similar in Tanstack Virtual seems to break even with a rowVirtualizer and using a div with dynamic css grid.

[hburrows]

@matthewhuang97 Did you ever find a solution to getting this to work. I have the same use case (a responsive grid that changes the number of lanes and item size when the windows resizes) but the virtualizer seems to be static after it's initially created. Any tips you have on how to make this work would be appreciated. Thanks!!