I'm trying to observe the dimensions of a container - a div (its width to be specific) to hide/show certain tags if the available space cannot contain them.

What I'm doing at the moment is to listen for 'window.resize' and make calculations.

Should I be listening just for the container resize instead of the entire window.resize ? If so, how ? Taking into account performance, how could you compare them ?

Current state of my custom hook, as you can see, makes calculations based on window.resize

    import React from "react";
    
    // To decide on whether or not tags should be hidden...
    export const useCalculateAvailableSpace = refParam => {
    
      if (refParam === null) return false;
      const [shouldHide, setShouldHide] = React.useState(false),
        calculateAvailableSpace = refParam => {
    
          if (!refParam || !refParam.current) return;
    
          const containerWidth = refParam.current.getBoundingClientRect().width,
            childrenWidth = Array.from(refParam.current.children).reduce((acc, cur) => acc + cur.getBoundingClientRect().width, 0);
    
          setShouldHide(childrenWidth > containerWidth);
        },
        handleResize = () => {
          calculateAvailableSpace(refParam);
        };
    
      React.useEffect(() => {
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
      }, []);
    
      return shouldHide;
    };