Recommended pattern for a grid of dynamic, but uniformly-sized items?
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
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!
3 Replies
harsh-harlequin•16mo ago
@injective19 that's true estimateSize is not invalidating cache when calculating measurements, but getItemKey is
you can force new calculation via
stormy-goldOP•16mo ago
Thank you! So my understanding then is that invalidating the key triggers a new measurement, and "measurement" in this case is initialized by estimateSize?
harsh-harlequin•16mo ago
Not invalidating the key, but creating new getItemKey refrence
Each item size and position is taken via estimateSize, you can check the virtual core impl it's pretty simple