Как написать кастомный React-хук для отслеживания ресайза окна или блока

Работая с динамическими интерфейсами, часто возникает необходимость реагировать на изменение размеров окна или конкретного DOM-элемента. Это может быть полезно при построении адаптивных компонентов, виртуальных списков, графиков и даже drag’n’drop-интерфейсов.

Вместо того чтобы дублировать логику в каждом компоненте, правильнее создать переиспользуемый React-хук.

📦 Хук для отслеживания размеров окна: useWindowSize

Начнём с базового случая — отслеживания размеров браузерного окна.

Применение:

✅ Плюсы:

• Простота
• Подходит для layout-компонентов
• Работает во всех браузерах

⚠️ Минусы:

• Работает только с window, не с элементами
• Может вызывать лишние ререндеры при частом ресайзе

📏 Хук для отслеживания размеров DOM-элемента: useResizeObserver

Если нужно отслеживать размеры конкретного блока, например <div ref={...}>, лучше использовать ResizeObserver.

Применение:

✅ Плюсы:

• Поддерживает наблюдение за любым DOM-элементом
• Работает на низком уровне через ResizeObserver
• Не зависит от окна

⚠️ Минусы:

• Не работает в очень старых браузерах (IE)
• Нужно обрабатывать ref аккуратно (например, при условной отрисовке)

🚀 Вывод

Кастомные хуки — это мощный способ инкапсуляции логики в React. Хуки useWindowSize и useResizeObserver решают разные задачи, и оба удобны в повседневной разработке. В своей практике я чаще использую ResizeObserver, особенно в компонентах, чувствительных к layout’у: графики, таблицы, текстовые блоки с обрезкой.

При этом, оборачивая такую логику в кастомные хуки, вы делаете интерфейс переиспользуемым, чистым и предсказуемым — именно за это мы и любим React.