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

[khovansky-al]

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.

[khovansky-al]

Re-tried the resize observer solution. Attaching both observer and measureRef in a way that measureRef is always called first seems to resolve the performance issues. When scrolling and components are initially mounted, measuring happens directly through measureRef and observer callback no-ops. When a mounted component resizes, measurement is updated through the observer callback.

I guess this handling could be left to the implementation author, although we could add a warning and an example to the docs.

[uffou]

@khovansky-al can you share your code, I am having a similar case where everything is dynamically changing and need to handle all updates manually.

[piecyk]

Have a look at #28 there i explain bit more caveats with measureRef and using ResizeObserver.

[omgoshjosh]

I really like the following solution from @piecyk and would love to see it in this library somehow!

https://codesandbox.io/s/usevirtualresizeobserver-04-11-2021-75ye2?file=/src/useVirtual.tsx

it comes from somewhere in the little rabbit hole that @piecyk links (here's another step in the rabbit hole)

the codesandbox is from his other comment here

the thing that gives me the most discomfort is having to write a wrapper "useVirtual" with a "import useVirtual as useVirtualImpl". but yeah if i ever have some time and energy i think i'd like to support this as some kind of opt-in behavior like much of the rest of how use-virtual is built.

EDIT: i forked the above sandbox together to illustrate what i'm planning on doing.

[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 🤔

[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.