fix useResizeObserver

Author: clementroche

packages/react/src/use-resize-observer/index.ts

@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  type DependencyList,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import debounce from 'just-debounce-it'
 
 let defaultDebounceDelay = 500
@@ -19,16 +25,21 @@ function setDebounce(delay: number) {
  * @returns {array} [setResizeObserverRef, options.lazy ? getEntryRef : entry]
  */
 
-const callbacksMap = new Map<Element, (entry: ResizeObserverEntry) => void>()
+const callbacksMap = new Map<
+  Element,
+  ((entry: ResizeObserverEntry) => void)[]
+>()
 
 let sharedObserver: ResizeObserver | null = null
 function getSharedObserver() {
   if (!sharedObserver) {
     sharedObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        const callback = callbacksMap.get(entry.target)
-        if (callback) {
-          callback(entry)
+        const callbacks = callbacksMap.get(entry.target)
+        if (callbacks) {
+          for (const cb of callbacks) {
+            cb(entry)
+          }
         }
       }
     })
@@ -43,22 +54,26 @@ function observeElement(
 ) {
   if (!el) return () => {}
 
-  let isFirstCall = true
-  const debouncedCallback = debounce(callback, debounceDelay)
-  callbacksMap.set(el, (entry: ResizeObserverEntry) => {
-    if (isFirstCall) {
-      callback(entry)
-    } else {
-      debouncedCallback(entry)
-    }
-    isFirstCall = false
-  })
+  const debouncedCallback = debounce(callback, debounceDelay, true)
+
+  const callbacks = callbacksMap.get(el) || []
+  callbacks.push(debouncedCallback)
+  callbacksMap.set(el, callbacks)
   const sharedObserver = getSharedObserver()
   sharedObserver.observe(el)
 
   return () => {
-    callbacksMap.delete(el)
-    sharedObserver.unobserve(el)
+    const callbacks = callbacksMap.get(el)
+    if (callbacks) {
+      const index = callbacks.indexOf(debouncedCallback)
+      if (index > -1) {
+        callbacks.splice(index, 1)
+      }
+      if (callbacks.length === 0) {
+        callbacksMap.delete(el)
+        sharedObserver.unobserve(el)
+      }
+    }
     if (callbacksMap.size === 0) {
       sharedObserver.disconnect()
     }
@@ -75,7 +90,7 @@ export function useResizeObserver<L extends boolean = false>(
     debounce?: number
     callback?: (entry: ResizeObserverEntry) => void
   } = {},
-  deps: any[] = []
+  deps: DependencyList = []
 ): [
   (element: HTMLElement | null) => void,
   L extends true

playground/react/app.tsx

@@ -56,6 +56,18 @@ export default function App() {
     },
   })
 
+  const rect2Ref = useRef<HTMLElement>(null)
+  const [setRectRef2, rect2, setRectWrapperRef2] = useRect({
+    // lazy: true,
+    callback(rect) {
+      if (rect2Ref.current) {
+        const { width, height, top, left } = rect
+
+        rect2Ref.current.textContent = `width: ${width}px - height: ${height}px - top: ${top}px - left: ${left}px`
+      }
+    },
+  })
+
   const [setIntersectionObserverRef, entry] = useIntersectionObserver()
 
   useDebouncedEffect(
@@ -143,6 +155,17 @@ export default function App() {
       >
         useRect: <span ref={rectRef} />
       </div>
+      <div
+        ref={setRectRef2}
+        style={{
+          width: '20vw',
+          height: '100px',
+          border: '1px solid green',
+          padding: '20px',
+        }}
+      >
+        useRect: <span ref={rect2Ref} />
+      </div>
       <div ref={setIntersectionObserverRef}>
         useIntersectionObserver:{' '}
         <span>{entry?.isIntersecting ? 'true' : 'false'}</span>