Not all possible items are being rendered with a collapsible component changing the position of the virtualized list

[rfgamaral]

Hi there,

We are having an issue with react-virtuoso that I was able to replicate in simple CodeSandbox. Here's a demo of the problem:

msedge_V9wBQgH3uc.mp4

In a nutshell, if you have a collapsible component and a virtualized list after that collapsible component, collapsing the content brings the virtualized list into view, but not all possible items are rendered. Also, if the component is first rendered expanded (demo at 0:43), scrolling down to the virtualized list will not render anything.

I'm wondering if we are missing something in react-virtualized configuration, or if a re-render must be forced to handle a scenario like this. Also, assuming a re-render must be forced, is this something that should fall on the consumer side of things, or should this behaviour be built-in in react-virtuoso? 🤔

[petyosi]

The video does not load.

[rfgamaral]

Oops, should work now.

[petyosi]

The number you show is related to the lazy unloading of the items. The list updates its items when the items no longer fill the viewport. However it does not eagerly unload items that leave the viewport.

Hope this makes sense.

[rfgamaral]

To be honest, I'm a bit confused, and I'm not sure what to do to fix this issue.

But, to make things easier for us, let's go with the simple use case:

The collapsible content starts expanded (i.e. const [open, setOpen] = useState(true);), then we click COLLAPSE and the content becomes, well, collapsed. The virtual list, which is supposed to appear after the collapsible content, is not rendered.

The only way I can think of to fix this issue is to force a re-render of the virtual list when the user clicks the COLLAPSE button, but I'm wondering if there's a better way that doesn't involve forcing a re-render. What do you suggest?