fix: "ResizeObserver loop limit exceeded"

[FezVrasta]

Copies the approach used in airbnb/visx#335 to fix a "ResizeObserver loop limit exceeded" error

[petyosi]

Hey @FezVrasta - do you have a repro for the issue somewhere? Thanks!

[FezVrasta]

No I'm sorry, it happened in a fairly complex non-OSS app, but you should be able to track down the issue following the PR I linked in the commit

[petyosi]

Hey @FezVrasta ,

I tested the change locally and it broke the grouped example. I traced the problem to some height measurements being dropped due to the component being unmounted and canceling the animation frame request.

What worked for me was to remove the

useEffect(() => () => window.cancelAnimationFrame(animationFrameID.current))

call. I think this should bring no harm, but I might be wrong (for example, measuring items which are no longer in the DOM). We will see.

Can you please test this in your setup? Thank you.

[FezVrasta]

I can't seem to be able to reproduce the problem if I comment out that line, but I'm not sure what could happen if onResize gets called while the component is unmounted. If that callback performs a check to make sure it's not running on a detached/destroyed node then everything should be okay.

Sorry I did forget to add the [] as second argument of useEffect, may you check again and let me know if it works properly now?

[petyosi]

Yeah, It is reproducible only in grouped mode with footer set, since multiple measurements are performed. I will examine it further and figure out something.

[FezVrasta]

How do you run the docs locally with a local version of react-virtuoso? Do I have to switch to gh-pages and manually copy the build?

[petyosi]

This is the site: https://github.com/petyosi/react-virtuoso-site

I keep it as a peer directory of the react-virtuoso repo, (the dir is called lib):
https://github.com/petyosi/react-virtuoso-site/blob/master/package.json#L32
To test the lib changes with the demos, I run yarn start in the lib directory, and then yarn start in the site directory.

Thank you for your effort!

[FezVrasta]

Thanks I got it working, but I can't reproduce any issue with the grouped example, what's the issue I should see?

Here's a gif of what I see:

[petyosi]

On my side, when I load the example (without any interaction - resize, scroll, etc), the items do not get loaded. I only see the header and the button. The reason is that one measurement gets dropped.

[FezVrasta]

May I know more about your environment? I wonder if it's OS/browser/version specific.

[petyosi]

Chrome 75 on MacOS.

[FezVrasta]

Ok, same here, I'm not sure what's going on then...

[petyosi]

Did you rebase on v0.10? I made one minor change in the hooks behavior there, and that is the only problem I can think of.

Anyway, will check again on my side later this week.

[FezVrasta]

I just rebased but I can't still reproduce your issue

[petyosi]

Whatever it was, it works now. Sorry for the hassle. published v0.10.1 with the fix.

Thank you once again,

[FezVrasta]

I'm experiencing the same issue again, I guess I didn't fix it completely 😢

[petyosi]

I haven't changed anything in the area since this PR. Something which might help me is the stack trace (and, of course, a repro would be awesome). Contact me on my email if I can observe the problem somewhere.

Cheers.