ResizeObserver

ResizeObserver сообщает об изменении размера box элемента без глобального window resize. Полезен для canvas, графиков, виртуализированных панелей и компонентов, реагирующих на размер контейнера. Избегайте feedback loop, когда callback сразу меняет layout и тот же наблюдаемый размер.

					const ro = new ResizeObserver((entries) => {
  const { width, height } = entries[0].contentRect;
  chart.resize(width, height);
});
ro.observe(container);
				

Браузер предупреждает о resize loop, если measure и write синхронны в callback. Для чисто адаптивных стилей проще CSS container queries.

На интервью: отличие от viewport media queries и предупреждения loop в callback.

Типовые ошибки: синхронный measure+write в callback; для стилей иногда достаточно CSS.

Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.

Чеклист:

• Правильный box (content vs border).
• Debounce или rAF для тяжёлой работы.
• disconnect при размонтировании.
• CSS, если нужны только стили.