Masterbar: Do not recreate masterbar button element on every render

[sirbrillig]

Proposed Changes

In this PR we move the MenuItem wrapper from MasterbarItem to a standalone component so React can recognize it and keep its references stable.

Fixes #98893

Why are these changes being made?

This fixes a bug introduced by #98510. That PR introduced a new React wrapper called MenuItem to wrap the button or anchor element rendered by MasterbarItem. However, that wrapper was created inline (via const MenuItem = ...) inside the render method of its parent. As a result, React re-creates it on every render. This is mostly invisible to the user but it means that the underlying HTML element is being recreated very frequently.

One consequence of this is that any references to the element will quickly go out of date.

The Popover component uses one such reference to determine its position on the page. When the reference points to a MasterbarItem, the reference goes out of date. By the time it calculates the position, it is no longer pointing to an element on the page and gets a position of all 0s.

Testing Instructions

1. Visit /plans and add a product to your cart.
2. Leave checkout and return to another calypso page like /home.
3. Click the masterbar shopping-cart icon.
4. Verify that the popup shopping cart appears below the button.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-131014

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-131014&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-131014&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~14 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
entry-main         +29 B  (+0.0%)      +14 B  (+0.0%)
entry-login        +29 B  (+0.0%)      +14 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Async-loaded Components (~14 bytes added 📈 [gzipped])

name                                        parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal        +29 B  (+0.0%)      +14 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[michaeldcain]

This LGTM. It fixes the bug seen with the popover component and doesn't seem to impact any of the other menu items on both desktop and mobile.

[ciampo]

LGTM, thank you for working on this 🚀