Dynamic rows with children that change size post-render are not re-measured

Ran into an issue with images inside the dynamic rows.

Images are rendered as placeholders first. When the asset is loaded, the image component is re-rendered to correct dimensions. However, as the image component is a child of the virtual row, the row and the virtualizer are unaware of the size change. This causes either a larger-than-intended gap between the elements, or an overlap.

I was able to mitigate it by

1. Saving the row container node (same that is attached to measureRef) to a separate ref.
2. Drilling down an onLoad callback prop
3. Calling measureRef manually with the node saved on step 1 inside onLoad.

It feels a bit cumbersome though. I wonder if this could be resolved inside the library, e.g. by having a resize observer on select nodes. In DIY testing of that idea without touching the library code though I ran into lots of re-rendering that decimated the performance. I understand that maybe there is no good one-size-fits-all solution for this. In this case, maybe we could at least improve the ergonomics of re-measuring individual rows somehow.

Or maybe there is a way to handle this case already and I’m just unaware of it. keyExtractor doesn’t seem to be the solution here because nothing about the row itself changes.

[tannerlinsley]

This seems like it should be solveable in v3 beta by calling virtualizer.measure() when you know your rendered items change in size. There are a lot of ways to detect that size change, so I don’t think we’re going to ship a way to do it automatically.

[piecyk]

I think this should be next step, it’s pretty common use case to have dynamic changes of item dimensions. Current we are in kinda of limbo with 3.0, api changes etc, but after it’s done we will focus on this.

Also if we would allow to pass as prop measuredCache: Record<Key, number>> to useVirtual, that would allow writing simple code for observing rows. Most problematic part is, when someone jumps in middle of list and start to scroll backward, then we need to update scroll position ( that implies we need to know current offset etc) otherwise list will jump a bit 🤔