Что такое Resize Observer и для чего он нужен?

Что проверяют

Знаете ли вы инструмент, который решает задачу подстройки под размер элемента, а не окна, и понимаете ли, почему обработчика события resize для этого мало.

Как отвечать

ResizeObserver наблюдает за размерами конкретных элементов и вызывает колбэк, когда размер действительно изменился. Событие resize у окна знает только про окно и молчит, если блок ужался из-за соседа, раскрытой панели или подросшего содержимого.

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { inlineSize } = entry.borderBoxSize[0];
    entry.target.classList.toggle("is-narrow", inlineSize < 480);
  }
});
ro.observe(el);

Что стоит добавить сверх определения: колбэк срабатывает один раз сразу после observe с текущим размером; один наблюдатель обслуживает много элементов, и так дешевле, чем заводить по штуке на элемент; вызов происходит после расчёта макета и до отрисовки, поэтому размеры читаются без принудительного пересчёта, в отличие от getBoundingClientRect внутри обработчика события.

Типичные применения: графики и виртуальные списки, которым нужен размер контейнера, поле ввода с автовысотой, компонент, меняющий раскладку по ширине родителя. Если задача чисто оформительская, сначала стоит посмотреть на контейнерные запросы в CSS, они закрывают её без JavaScript.

Где спотыкаются

Меняют в колбэке размер того, за чем наблюдают, и получают в консоли ошибку про незавершённый цикл наблюдателя. Браузер обрывает бесконечный круг, часть уведомлений теряется, вёрстка дёргается. Правку размера выносят на следующий кадр или ставят условие, гасящее цикл.

Не отписываются. Наблюдатель держит ссылку на элемент, поэтому при размонтировании компонента disconnect обязателен, иначе утечка и колбэки на выброшенных узлах.

Ждут уведомления о перемещении. Наблюдатель следит только за размером: элемент переехал, положение при прокрутке изменилось, размер тот же и колбэка не будет. Для видимости берут IntersectionObserver.