fix: infinite loop on useResizeObserver that would repeatedly re-inst…

…antiate resize observer instance

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;