bounding-rect-hook.tsx

export function useBoundingClientRect<T extends HTMLElement>() {
  const [rect, setRect] = useState<DOMRect | null>(null);
  const ref = useRef<T>(null);

  const update = useCallback(() => {
    if (ref.current) setRect(ref.current.getBoundingClientRect());
    else setRect(null);
  }, []);

  useEffectOnce(() => {
    setTimeout(update, 500);
  });
  useEventListener("resize", update);

  return [ref, rect] as const;
}