useMedia adds excessive event listeners to the window, slowing down Safari

[jesstelford]

Overview

As complexity of the admin grows, more media queries are being used. Most modern browsers can handle the increase in media query processing without issue, however Safari has a noticeable slowdown (Shopifolk; DM me for a video of the issue).

There are a number of places where components are rendered in a loop which contain a useMedia/useMediaLayout call:

function ProductRow() {
  const matches = useMedia('screen');
  return <div />
}

function ProductTable() {
  return Array.from({length: 50}, (_, i) => (
    <ProductRow key={i} />
  ))
}

These add up and quickly overwhelm Safari.

Since the queries themselves are often identical, it would be possible to attach only a single event listener per query in which to trigger the state update from. Testing of this approach in Polaris has shown positive results without regression.

Consuming repo

What repo were you working in when this issue occurred?

web