Отслеживание размеров окна

React хук useWindowSize отслеживает размеры окна браузера для адаптивных интерфейсов. В SSR, где window недоступен, хук использует начальные значения (defaultWidth, defaultHeight). После гидратации размеры обновляются.

import { useState, useEffect } from 'react';

function useWindowSize(defaultWidth = 0, defaultHeight = 0) {
const [windowSize, setWindowSize] = useState({
width: defaultWidth,
height: defaultHeight,
});

useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};

handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);

return windowSize;
}

Хук возвращает объект { width, height } для динамической адаптации UI.

👉 @sWebDev