Estoy tratando de observar las dimensiones de un contenedor: un div (su ancho para ser específico) para ocultar/mostrar ciertas etiquetas si el espacio disponible no puede contenerlas.

Lo que estoy haciendo en este momento es escuchar 'window.resize' y hacer cálculos.

¿Debería escuchar solo el cambio de tamaño del contenedor en lugar de todo el tamaño de la ventana? Si es así, cómo ? Teniendo en cuenta el rendimiento, ¿cómo podría compararlos?

El estado actual de mi enlace personalizado, como puede ver, hace cálculos basados en 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; };