| 1 | import { useEffect, useRef, type RefObject } from "react"; |
| 2 | |
| 3 | export function useFooterHeightLifecycle( |
| 4 | footerRef: RefObject<HTMLElement | null>, |
| 5 | onHeight: (height: number) => void, |
| 6 | ) { |
| 7 | const lastHeight = useRef(0); |
| 8 | useEffect(() => { |
| 9 | const element = footerRef.current; |
| 10 | if (!element || typeof ResizeObserver === "undefined") return; |
| 11 | let frame = 0; |
| 12 | const update = () => { |
| 13 | if (frame) window.cancelAnimationFrame(frame); |
| 14 | frame = window.requestAnimationFrame(() => { |
| 15 | frame = 0; |
| 16 | const next = Math.round(element.getBoundingClientRect().height); |
| 17 | if (Math.abs(lastHeight.current - next) < 2) return; |
| 18 | lastHeight.current = next; |
| 19 | onHeight(next); |
| 20 | }); |
| 21 | }; |
| 22 | update(); |
| 23 | const observer = new ResizeObserver(update); |
| 24 | observer.observe(element); |
| 25 | return () => { |
| 26 | if (frame) window.cancelAnimationFrame(frame); |
| 27 | observer.disconnect(); |
| 28 | }; |
| 29 | }, [footerRef, onHeight]); |
| 30 | } |
| 31 |