Giters

everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React

Home Page:https://www.react-laag.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

getBoundingClientRect calls causing big slowdowns

natew opened this issue · comments

commented

In general it would be a huge win to have the library defer to ResizeObserver + IntersectionObserver where possible.

We have a big results list where each item has 3 popovers. So 3 * 25 in the typical case. I’m noticing in multiple cases react-laag is calling getBoundingClientRect during mount/unmount. This is totally unnecessary.

One, it can call that once you hover no need to do it eagerly. Second, it can do it only when it’s intersecting on the screen. Third, it can use ResizeObserver to avoid some calls altogether.

This is sorely needed for React. There just doesn’t exist a great Popover primitive and that sucks. I should help write it instead of bitching here, but instead I’ll just bitch for now. I spent way too much time writing one a while ago but it didn’t have the elegance of API as you have here.

Would be absolutely awesome to see movement here.

Even better: make a generic utility for tracking size that combines the best of MutationObserver (can it help avoid some work?) ResizeObserver, IntersectionObserver and finally when all else fails getBoundingClientRect. I’d love to have a micro library that made a sane API for that to use elsewhere.

commented

Hi @natew,
I'm so sorry for my late response. I remember reading your issue many weeks ago, but totally forgot to leave a message.
Anyway, the last couple of weeks I've worked on v2.0.0 of this lib, and today I finally released it.
There are definitely some great ideas you got there. In v2, the layers aren't eagerly calculated anymore, and instead wait untill the layer is actually open/shown. I think this will boost the performance in your case a lot.
I'm looking forward to experiment with the ResizeObserver / IntersectionObserver stuff. I'll put this on the roadmap for now, but hopefully I have some time left to investigate this somewhere in the upcoming weeks.

commented

I did some testing in a small project with the latest version of react-laag.
I have to say it runs pretty smooth with 100 instances of useLayer.
Here's an example project to place with:
perf-test-react-laag.zip

I will close this issue for now, but if you have any concerns about performance in your project, feel free to comment and re-open this issue!