Memoize resize callback

mediamonks · Feb 9, 2024 · 783bcfd · 783bcfd
1 parent 3e74eb8
commit 783bcfd
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/hooks/useContentRectState/useContentRectState.ts b/src/hooks/useContentRectState/useContentRectState.ts
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useMount } from '../../index.js';
 import { unref, type Unreffable } from '../../utils/unref/unref.js';
 import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
@@ -11,12 +11,14 @@ export function useContentRectState(target: Unreffable<Element | null>): DOMRect
   const [contentRect, setContentRect] = useState<DOMRectReadOnly | null>(null);
   const rafRef = useRef(0);
 
-  useResizeObserver(target, (entries) => {
+  const onResize = useCallback<ResizeObserverCallback>((entries) => {
     cancelAnimationFrame(rafRef.current);
     rafRef.current = requestAnimationFrame(() => {
       setContentRect(entries.at(0)?.contentRect ?? null);
     });
-  });
+  }, []);
+
+  useResizeObserver(target, onResize);
 
   useMount(() => {
     setContentRect(unref(target)?.getBoundingClientRect() ?? null);