How do I have rac Virtualizer relayout when an element's size changes after render?

[rostero1]

The new Virtualizer is great (with a complex implementation, as most are). I'm using the ListLayout, but am interested in having my own at some point. What do I need to do to relayout when an item has its size changed after render? Reasons are to accommodate any item rendered for the visible viewport changing height.

As an example, each item renders content, which is defined via

const [content, setContent] = React.useState(() => randomSizedString());

React.useEffect(() => {
  setInterval(() => setContent(randomSizedString()), randomInt(300, 1800));
}, [])

Also, what if the container isn't a fixed size in the examples, and gets resized?

[snowystinger]

That changing content should be moved up and out of the item to the list itself to that we know to invalidate that area.

[devongovett]

We could possibly add something to manually trigger a layout change via this:

react-spectrum/packages/@react-aria/virtualizer/src/useVirtualizerItem.ts

Line 31 in 2cd8f0b

let updateSize = useCallback(() => {

I didn't want to add a ResizeObserver to every single item by default though. That sounds expensive. Right now it only triggers when an item renders for the first time.

[rostero1]

Is it possible to do this with Virtuzlier from react-aria-components? I don't see a way to get access to the virtualizer and see that useVirtualizerItem requires the virtualizer. Also, without moving this up and out would you have to add a resize observer to each item? It'd be nice if there was a way to add the resize observer to just the parent and have the parent know which items were in the current slice so you can iterate over each of them and update the size.

[rostero1]

I guess you would need to know when the individual items in the list get resized. Think of a chat message that has been edited by another user.