feat(useResizeObserver): optimize and refactor hook

[EldarMuhamethanov]

• Unit-тесты
• Release notes

Описание

Ключевая идея: уменьшить накладные расходы при resize за счёт переиспользования инфраструктуры наблюдения и снижения количества лишних вызовов колбэков при частых изменениях размеров.

Изменения

Зачем это сделано

В resize-сценариях (особенно при большом количестве элементов и частых изменениях layout) лишние инстансы observer'ов и частые немедленные callback'и создают ненужную нагрузку на main thread и React-обновления.

Цель — сделать механизм более экономным по ресурсам и более стабильным под нагрузкой.

Что дает новый подход

• Переиспользование ResizeObserver
  Для element resize введены общие пулы наблюдателей (по box), вместо создания независимого observer на каждый хук/элемент.
• Меньше лишних обновлений через rafBatch
  Resize-события батчатся в один requestAnimationFrame-тик с отправкой только актуального значения.
• Разделение element/window resize
  Для окна и элементов теперь отдельные механизмы наблюдения, что уменьшает внутренние ветвления и упрощает оптимизацию каждого пути отдельно.
• Единая подписка на window resize
  Подписки для window-сценариев агрегируются, чтобы не плодить одинаковые addEventListener на каждое использование хука.
• Более предсказуемый cleanup
  Отписки и отмена pending raf централизованы, что снижает риск утечек и “хвостов” после unmount.

Release notes

[github-actions]

size-limit report 📦

Path	Size
JS	415 KB (+0.53% 🔺)
JS (gzip)	127.01 KB (+0.57% 🔺)
JS (brotli)	105.09 KB (+0.58% 🔺)
JS import Div (tree shaking)	811 B (0%)
CSS	382.98 KB (0%)
CSS (gzip)	46.92 KB (0%)
CSS (brotli)	37.02 KB (0%)

[github-actions]

e2e tests

Playwright Report

[github-actions]

📊 Найдены изменения в собранных файлах: Отчет

Commit 893cfc7

[github-actions]

👀 Docs deployed

• ✅ Website
• ✅ Playground

📦 Package ✅

yarn add @vkontakte/vkui@https://development.s3.prodcloud.vk.team/pull/9665/893cfc7f91f7c71409ff72d704f1ec1043f3a1d9/pkg/@vkontakte/vkui/_pkg.tgz

Commit 893cfc7

[codecov]

Codecov Report

❌ Patch coverage is 96.52778% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 95.25%. Comparing base (8d4a9ef) to head (893cfc7).
⚠️ Report is 14 commits behind head on master.

Files with missing lines	Patch %	Lines
...i/src/hooks/useResizeObserver/useResizeObserver.ts	96.15%	3 Missing ⚠️
...hooks/useResizeObserver/useWindowResizeObserver.ts	96.42%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##           master    #9665    +/-   ##
========================================
  Coverage   95.25%   95.25%            
========================================
  Files         442      443     +1     
  Lines       12236    12353   +117     
  Branches     4444     4471    +27     
========================================
+ Hits        11655    11767   +112     
- Misses        581      586     +5     

Flag	Coverage Δ
unittests	95.25% <96.52%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[inomdzhon]

Из описания оптимизация звучит здраво, но, конечно, очень не хватает объективных данных до и после, хотелось бы регресс теста, где мы берём N компонентов и с включенным Perfomance в DevTools проверям память и перерисовки при первом рендере и дальнеших ре-рендерах при изменении размеров