From 8df35064a033a850a6311695dfa6009850cdc693 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Thu, 10 Sep 2020 08:14:54 -0700
Subject: [PATCH] fix: infinite loop on useResizeObserver that would repeatedly
 re-instantiate resize observer instance

---
 src/hooks/useResizeObserver.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/hooks/useResizeObserver.js b/src/hooks/useResizeObserver.js
index b49c5f072..13b9a1706 100644
--- a/src/hooks/useResizeObserver.js
+++ b/src/hooks/useResizeObserver.js
@@ -1,23 +1,23 @@
-import { useLayoutEffect, useState, useRef } from 'react';
+import { useLayoutEffect, useState } from 'react';
+
+// ResizeObserver is not available at build time
+const ResizeObserver = global.ResizeObserver || class ResizeObserver {};
 
 const useResizeObserver = () => {
-  const ref = useRef(null);
-  const [height, setHeight] = useState(0);
+  const [ref, setRef] = useState(null);
+  const [entry, setEntry] = useState(null);
 
-  // ResizeObserver is not available at build time
-  const ResizeObserver = global.ResizeObserver || class ResizeObserver {};
+  useLayoutEffect(() => {
+    const resizeObserver = new ResizeObserver(([entry]) => setEntry(entry));
 
-  const resizeObserver = new ResizeObserver((entries) => {
-    entries.forEach((entry) => {
-      setHeight(entry.contentBoxSize.blockSize);
-    });
-  });
+    if (ref) {
+      resizeObserver.observe(ref);
+    }
 
-  useLayoutEffect(() => {
-    resizeObserver.observe(ref.current);
-  }, [resizeObserver]);
+    return () => resizeObserver.disconnect();
+  }, [ref]);
 
-  return [ref, height];
+  return [setRef, entry];
 };
 
 export default useResizeObserver;