MenuButton performance issues

[aminland]

🐛 Bug report

Current Behavior

It seems that simply having a MenuButton on the page (not expanded) results in a getBoundingClientRect call on every frame (see screenshot). On other pages (e.g. reach-alert), the profile on the right side is nice and empty.

Expected behavior

If the menu isn't open, there is no reason to be observing and measuring it. (It would be nice if it wasn't re-measured even if it was open)

Reproducible example

Reach's own docs

Suggested solution(s)

I'm not too with what's under the hood, but perhaps add a prop to the popover component that allows enabling / disabling measurement, and control this prop based on menu state?

Additional context

We ran into this issue while profiling our own application. Even when the window isn't in focus, the idle cpu usage for this chrome tab sits at 10% due to this issue.

Your environment

Software	Name(s)	Version
Reach Package	menu-button	0.10.5
Browser	Chrome	83

[CodingDive]

Can confirm with the same packages. Using MenuButton in some performance-critical code and it occupies quite a bit of CPU.

[raunofreiberg]

MenuButton uses Popover under the hood, which itself makes use of useRect which has an observe argument. Maybe MenuButton could pass its open state through Popover into it?

[cpmsmith]

Maybe MenuButton could pass its open state through Popover into it?

Implemented that in #640, seems to work great.