diff --git a/src/hooks/useContentRectState/useContentRectState.ts b/src/hooks/useContentRectState/useContentRectState.ts index aba3ff5..f663073 100644 --- 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): DOMRect const [contentRect, setContentRect] = useState(null); const rafRef = useRef(0); - useResizeObserver(target, (entries) => { + const onResize = useCallback((entries) => { cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(() => { setContentRect(entries.at(0)?.contentRect ?? null); }); - }); + }, []); + + useResizeObserver(target, onResize); useMount(() => { setContentRect(unref(target)?.getBoundingClientRect() ?? null);