Use Debounced Dimensions

1import { RefObject, useEffect, useState } from "react"
2 
3interface Dimensions {
4  width: number
5  height: number
6}
7 
8export function useDimensions(
9  ref: RefObject<HTMLElement | SVGElement | null>
10): Dimensions {
11  const [dimensions, setDimensions] = useState<Dimensions>({
12    width: 0,
13    height: 0,
14  })
15 
16  useEffect(() => {
17    let timeoutId: NodeJS.Timeout
18 
19    const updateDimensions = () => {
20      if (ref.current) {
21        const { width, height } = ref.current.getBoundingClientRect()
22        setDimensions({ width, height })
23      }
24    }
25 
26    const debouncedUpdateDimensions = () => {
27      clearTimeout(timeoutId)
28      timeoutId = setTimeout(updateDimensions, 250) // Wait 250ms after resize ends
29    }
30 
31    // Initial measurement
32    updateDimensions()
33 
34    window.addEventListener("resize", debouncedUpdateDimensions)
35 
36    return () => {
37      window.removeEventListener("resize", debouncedUpdateDimensions)
38      clearTimeout(timeoutId)
39    }
40  }, [ref])
41 
42  return dimensions
43}