useElementWithSize.js

const useElementWithSize = () => {
    const [ currentElement, setCurrentElement ] = useState(null);
    const [ width, setWidth ] = useState(null);
    const [ height, setHeight ] = useState(null);

    const updateDimensions = (element) => {
        setWidth(element?.offsetWidth);
        setHeight(element?.offsetHeight);
    };

    useEffect(() => {
        const onResize = () => {
            if (currentElement) {
                updateDimensions(currentElement);
            }
        };

        window.addEventListener('resize', onResize);
        return () => {
            window.removeEventListener('resize', onResize);
        };
    }, [ currentElement ]);

    const onElement = (element) => {
        setCurrentElement(element);
        updateDimensions(element);
    };

    return {
        width,
        height,
        currentElement,
        onElement
    };
};

// Example:

const MyComponent = () => {
    const helloWorldElement = useElementWithSize();
  
    return (
        <div ref={ helloWorldElement.onElement }>
            Hello world! Current width: { helloWorldElement.width }
        </div>
    ) 
}