ResizeObserver: the size of a component, not just the window

Useful to know

ResizeObserver reports changes in the dimensions of the element's content or border box. This is a different question from "does the size of the window change". A container can shrink because of an open side panel without the window being changed. [1]

Imagine a diagram in an administrative panel. When the navigation unfolds, the free width for the chart decreases. Monitoring its container allows you to recalculate the arrangement according to the actual space available.

Choose which box you are measuring. Content box is the content location ; border box also includes the internal spacing and border. [1] A discrepancy between the measurement and the width used may result in incorrect calculations.

Do not change the observed size in response to any change. This makes it easy to create a cycle of measurement and new change. Check that the new state is actually different and end the monitoring when the component is removed.