From 0df9a02415c8ecf04a3fcac09ff4db6f30143baf Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chancedigital.io>
Date: Mon, 22 Jun 2020 07:40:47 -0700
Subject: [PATCH 1/2] rect: fix over-rendering and needless attachment of
 listeners

---
 packages/rect/src/index.tsx | 49 ++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/packages/rect/src/index.tsx b/packages/rect/src/index.tsx
index 8464cd676..5be0e407c 100644
--- a/packages/rect/src/index.tsx
+++ b/packages/rect/src/index.tsx
@@ -91,43 +91,52 @@ export function useRect<T extends HTMLElement = HTMLElement>(
   observe: boolean = true,
   onChange?: (rect: DOMRect) => void
 ): null | DOMRect {
+  let [element, setElement] = useState(nodeRef.current);
   let initialRectSet = useRef(false);
   let [rect, setRect] = useState<DOMRect | null>(null);
-  let observerRef = useRef<any>(null);
+  let onChangeRef = useRef<typeof onChange>();
+
   useIsomorphicLayoutEffect(() => {
-    const cleanup = () => {
-      observerRef.current && observerRef.current.unobserve();
-    };
+    onChangeRef.current = onChange;
+  });
 
-    if (!nodeRef.current) {
-      console.warn("You need to place the ref");
-      return cleanup;
+  useIsomorphicLayoutEffect(() => {
+    if (nodeRef.current !== element) {
+      setElement(nodeRef.current);
     }
+  });
 
-    if (!observerRef.current) {
-      observerRef.current = observeRect(nodeRef.current, (rect: DOMRect) => {
-        onChange && onChange(rect);
-        setRect(rect);
-      });
+  useIsomorphicLayoutEffect(() => {
+    if (element && !initialRectSet.current) {
+      initialRectSet.current = true;
+      setRect(element.getBoundingClientRect());
     }
+  }, [element]);
 
-    if (!initialRectSet.current) {
-      initialRectSet.current = true;
-      setRect(nodeRef.current.getBoundingClientRect());
+  useIsomorphicLayoutEffect(() => {
+    if (!element) {
+      console.warn("You need to place the ref");
+      return cleanup;
     }
 
-    observe && observerRef.current.observe();
+    let observer = observeRect(element, (rect) => {
+      onChangeRef.current && onChangeRef.current(rect);
+      setRect(rect);
+    });
+
+    observe && observer.observe();
     return cleanup;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [observe, onChange]);
+
+    function cleanup() {
+      observer.unobserve();
+    }
+  }, [observe, element]);
 
   return rect;
 }
 
 export default Rect;
 
-export type PartialRect = Partial<PRect>;
-
 export type PRect = Partial<DOMRect> & {
   readonly bottom: number;
   readonly height: number;

From a3ca034b3539f3739566cb5753c37431c382dfbf Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chancedigital.io>
Date: Mon, 22 Jun 2020 14:23:36 -0700
Subject: [PATCH 2/2] rect: update deps + broaden types

---
 .../examples/change-observed-ref.example.tsx  | 29 +++++++++++++++++++
 packages/rect/package.json                    |  2 +-
 packages/rect/src/index.tsx                   | 14 +++++----
 yarn.lock                                     |  8 ++---
 4 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 packages/rect/examples/change-observed-ref.example.tsx

diff --git a/packages/rect/examples/change-observed-ref.example.tsx b/packages/rect/examples/change-observed-ref.example.tsx
new file mode 100644
index 000000000..ba50d93d0
--- /dev/null
+++ b/packages/rect/examples/change-observed-ref.example.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { useRect } from "@reach/rect";
+
+let name = "Change the observed ref";
+
+function Example() {
+  const refLeft = React.useRef<HTMLTextAreaElement>(null);
+  const refRight = React.useRef<HTMLTextAreaElement>(null);
+  const [whichRect, setWhichRect] = React.useState(true);
+  const rect = useRect(whichRect ? refLeft : refRight);
+  return (
+    <div>
+      <pre>
+        {whichRect ? "left" : "right"}: {JSON.stringify(rect, null, 2)}
+      </pre>
+      <button onClick={() => setWhichRect(!whichRect)}>
+        Toggle Observed Ref
+      </button>
+      <div>
+        <textarea ref={refLeft} defaultValue="resize this" />
+        <textarea ref={refRight} defaultValue="resize this" />
+      </div>
+    </div>
+  );
+}
+
+Example.story = { name };
+export const Comp = Example;
+export default { title: "Rect" };
diff --git a/packages/rect/package.json b/packages/rect/package.json
index 71d1ef0df..3145b417d 100644
--- a/packages/rect/package.json
+++ b/packages/rect/package.json
@@ -13,7 +13,7 @@
     "build": "ts-node ../../scripts/build"
   },
   "dependencies": {
-    "@reach/observe-rect": "1.1.0",
+    "@reach/observe-rect": "1.2.0",
     "@reach/utils": "0.10.4",
     "prop-types": "^15.7.2",
     "tslib": "^2.0.0"
diff --git a/packages/rect/src/index.tsx b/packages/rect/src/index.tsx
index 5be0e407c..4e1a44c82 100644
--- a/packages/rect/src/index.tsx
+++ b/packages/rect/src/index.tsx
@@ -65,7 +65,10 @@ export type RectProps = {
    *
    * @see Docs https://reacttraining.com/reach-ui/rect#rect-onchange
    */
-  children(args: { rect: PRect | null; ref: React.Ref<any> }): JSX.Element;
+  children(args: {
+    rect: PRect | null;
+    ref: React.RefObject<any>;
+  }): JSX.Element;
 };
 
 if (__DEV__) {
@@ -86,8 +89,8 @@ if (__DEV__) {
  * @param observe
  * @param onChange
  */
-export function useRect<T extends HTMLElement = HTMLElement>(
-  nodeRef: React.RefObject<T>,
+export function useRect<T extends Element = HTMLElement>(
+  nodeRef: React.RefObject<T | undefined | null>,
   observe: boolean = true,
   onChange?: (rect: DOMRect) => void
 ): null | DOMRect {
@@ -114,12 +117,13 @@ export function useRect<T extends HTMLElement = HTMLElement>(
   }, [element]);
 
   useIsomorphicLayoutEffect(() => {
+    let observer: ReturnType<typeof observeRect>;
     if (!element) {
       console.warn("You need to place the ref");
       return cleanup;
     }
 
-    let observer = observeRect(element, (rect) => {
+    observer = observeRect(element, (rect) => {
       onChangeRef.current && onChangeRef.current(rect);
       setRect(rect);
     });
@@ -128,7 +132,7 @@ export function useRect<T extends HTMLElement = HTMLElement>(
     return cleanup;
 
     function cleanup() {
-      observer.unobserve();
+      observer && observer.unobserve();
     }
   }, [observe, element]);
 
diff --git a/yarn.lock b/yarn.lock
index 1f3e9c7b7..af42692e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3112,10 +3112,10 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@reach/observe-rect@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.1.0.tgz#4e967a93852b6004c3895d9ed8d4e5b41895afde"
-  integrity sha512-kE+jvoj/OyJV24C03VvLt5zclb9ArJi04wWXMMFwQvdZjdHoBlN4g0ZQFjyy/ejPF1Z/dpUD5dhRdBiUmIGZTA==
+"@reach/observe-rect@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
+  integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
 
 "@reach/router@^1.2.1", "@reach/router@^1.3.3":
   version "1.3.3"