Don't continuously observeRect on Popovers that are hidden

Author: cpmsmith

packages/popover/examples/hidden.example.js

@@ -0,0 +1,54 @@
+import React, { useRef, useState, useCallback } from "react";
+import Popover from "@reach/popover";
+
+let name = "Hidden";
+
+function Example() {
+  const ref = useRef(null);
+  const [open, setOpen] = useState(false);
+  const updateOpen = useCallback(
+    (e) => {
+      setOpen(e.target.checked);
+    },
+    [setOpen]
+  );
+
+  return (
+    <div>
+      <textarea placeholder="resize me to move stuff around" />
+      <label style={{ display: "inline-block" }}>
+        <input ref={ref} type="checkbox" onChange={updateOpen} />
+        Open popover
+      </label>
+      <Popover hidden={!open} targetRef={ref}>
+        <div
+          style={{
+            backgroundColor: "#FFF",
+            border: "1px solid #333",
+            padding: "0 1em",
+            borderRadius: "0.5em",
+            maxWidth: "15em",
+          }}
+        >
+          <p>
+            Wow, popover content! It's still in the DOM, even when it's not
+            visible.
+          </p>
+          <p>
+            <i style={{ opacity: 0.8 }}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </i>
+          </p>
+          <p>
+            <button>I should be the next tab</button>
+          </p>
+        </div>
+      </Popover>
+      <button>and then tab to me after that one</button>
+    </div>
+  );
+}
+
+Example.story = { name };
+export const Comp = Example;
+export default { title: "Popover" };

packages/popover/examples/hidden.example.tsx

@@ -0,0 +1,54 @@
+import React, { useRef, useState, useCallback } from "react";
+import Popover from "@reach/popover";
+
+let name = "Hidden (TS)";
+
+function Example() {
+  const ref = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const updateOpen = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setOpen(e.target.checked);
+    },
+    [setOpen]
+  );
+
+  return (
+    <div>
+      <textarea placeholder="resize me to move stuff around" />
+      <label style={{ display: "inline-block" }}>
+        <input ref={ref} type="checkbox" onChange={updateOpen} />
+        Open popover
+      </label>
+      <Popover hidden={!open} targetRef={ref}>
+        <div
+          style={{
+            backgroundColor: "#FFF",
+            border: "1px solid #333",
+            padding: "0 1em",
+            borderRadius: "0.5em",
+            maxWidth: "15em",
+          }}
+        >
+          <p>
+            Wow, popover content! It's still in the DOM, even when it's not
+            visible.
+          </p>
+          <p>
+            <i style={{ opacity: 0.8 }}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </i>
+          </p>
+          <p>
+            <button>I should be the next tab</button>
+          </p>
+        </div>
+      </Popover>
+      <button>and then tab to me after that one</button>
+    </div>
+  );
+}
+
+Example.story = { name };
+export const Comp = Example;
+export default { title: "Popover" };

packages/popover/src/index.tsx

@@ -28,6 +28,13 @@ export type PopoverProps = {
   children: React.ReactNode;
   targetRef: React.RefObject<HTMLElement>;
   position?: Position;
+  /**
+   * Render the popover markup, but hide it – used by MenuButton so that it
+   * can have an `aria-controls` attribute even when its menu isn't open, and
+   * used inside `Popover` as a hint that we can tell `useRect` to stop
+   * observing for performance's sake.
+   */
+  hidden?: boolean;
   /**
    * Testing this API so we might accept additional nodes that apps can use to
    * determine the position of the popover. One example where it may be useful
@@ -58,13 +65,14 @@ const PopoverImpl = forwardRef<HTMLDivElement, PopoverProps>(
       targetRef,
       position = positionDefault,
       unstable_observableRefs = [],
+      hidden,
       ...props
     },
     forwardedRef
   ) {
     const popoverRef = useRef<HTMLDivElement>(null);
-    const popoverRect = useRect(popoverRef);
-    const targetRect = useRect(targetRef);
+    const popoverRect = useRect(popoverRef, !hidden);
+    const targetRect = useRect(targetRef, !hidden);
     const ref = useForkedRef(popoverRef, forwardedRef);
 
     useSimulateTabNavigationForReactTree(targetRef, popoverRef);
@@ -73,6 +81,7 @@ const PopoverImpl = forwardRef<HTMLDivElement, PopoverProps>(
       <div
         data-reach-popover=""
         ref={ref}
+        hidden={hidden}
         {...props}
         style={{
           position: "absolute",