Add debounce to useResizeObserver hook

src/hooks/useResizeObserver/useResizeObserver.stories.mdx

@@ -7,10 +7,16 @@ import { Meta } from '@storybook/blocks';
 This hook allows you to add a ResizeObserver for an element and remove it when the component
 unmounts.
 
+By default the callback is debounced at 200ms to improve performance.
+
 ## Reference
 
 ```ts
-function useResizeObserver(ref: RefObject<Element>, callback: ResizeObserverCallback): void;
+function useResizeObserver(
+  ref: RefObject<Element>,
+  callback: ResizeObserverCallback,
+  debounceTime?: number | null,
+): void;
 ```
 
 ## Usage

src/hooks/useResizeObserver/useResizeObserver.ts

@@ -1,24 +1,44 @@
+import { debounce } from 'lodash-es';
 import { type RefObject, useEffect } from 'react';
 
+const resizeObserverInstanceCallbacks = new Map<Element, ResizeObserverCallback>();
+let resizeObserverInstance: ResizeObserver | null = null;
+
 /**
  * This hook allows you to add a ResizeObserver for an element and remove it
  * when the component unmounts.
  *
  * @param ref - The ref to observe
  * @param callback - The callback to fire when the element resizes
+ * @param debounceTime - The number in milliseconds the callback is debounced
  */
-export function useResizeObserver(ref: RefObject<Element>, callback: ResizeObserverCallback): void {
+export function useResizeObserver(
+  ref: RefObject<Element>,
+  callback: ResizeObserverCallback,
+  debounceTime?: number | null,
+): void {
   useEffect(() => {
-    const resizeObserverInstance = new ResizeObserver(callback);
-
     if (ref.current === null) {
       throw new Error('`ref.current` is undefined');
     }
 
-    resizeObserverInstance.observe(ref.current);
+    if (!resizeObserverInstance) {
+      resizeObserverInstance = new ResizeObserver((entries, observer) => {
+        for (const entry of entries) {
+          resizeObserverInstanceCallbacks.get(entry.target)?.(entries, observer);
+        }
+      });
+    }
+
+    const element = ref.current;
+    const callbackFunction =
+      debounceTime === null ? callback : debounce(callback, debounceTime ?? 200);
+    resizeObserverInstanceCallbacks.set(element, callbackFunction);
+    resizeObserverInstance.observe(element);
 
     return () => {
-      resizeObserverInstance.disconnect();
+      resizeObserverInstance?.unobserve(element);
+      resizeObserverInstanceCallbacks.delete(element);
     };
-  }, [ref, callback]);
+  }, [ref, callback, debounceTime]);
 }