import {useEffect, useState} from "react";

export const useWidth = <T extends HTMLElement>(it: T | null) => {
    const [width, setWidth] = useState<number>(0);
    useEffect(() => {
        let animationFrame: number | null = null;
        const listener = () => {
            animationFrame = window.requestAnimationFrame(() => {
                animationFrame = null;
                setWidth(it?.offsetWidth || 0);
            });
        };
        listener();
        window.addEventListener("resize", listener);
        return () => {
            window.removeEventListener("resize", listener);
            if (animationFrame !== null) {
                window.cancelAnimationFrame(animationFrame);
            }
        }
    }, [it]);
    return width;
}