RenderIsVisible doesn't work well when items are rearranged.

[xgbuils]

Hi,

First of all, thanks for your time to create this lightweight and useful library.

I was trying to use in a project with a list that is able to be rearranged and I've found that some items are not visible after reodering the list. I've created a codesandbox for reproducing the issue:

https://codesandbox.io/s/eager-mclaren-ge3rz?file=/src/App.js

After clicking in the button some items keep invisible:

[GusRuss89]

Hi @xgbuils

It looks like this is because the items come into view without the help of scrolling or resizing the window. If you click on "Reorder", then scroll down and back up again, you'll see the list items appear.

You can fix this by changing the keys according to the order. Here's an example - https://codesandbox.io/s/admiring-dewdney-sincx?file=/src/App.js

This forces the list item to be re-created (not just re-rendered) - thankfully that's a light operation because the list item is wrapped in <RenderIfVisible></RenderIfVisible>.

It would be good to have a more elegant way to handle list reordering though. I'll have a think about how that could be done.

Thanks for reporting :)

[xgbuils]

Hi @GusRuss89

This forces the list item to be re-created (not just re-rendered) - thankfully that's a light operation because the list item is wrapped in .

Then I'll take this approach in the meantime.

Thanks for answering so quickly :)