Кастомные хуки (Custom Hooks). Создаем свой первый кастомный хук useWindowSize

Сегодня напишем простой, но очень полезный хук - useWindowSize. Он будет отслеживать ширину и высоту окна браузера. Это пригодится, если вам нужно менять верстку (например, скрывать сайдбар) при изменении размера экрана.

Мы создадим функцию, которая:

1. Использует useState для хранения размеров.
2. Использует useEffect для подписки на событие resize.
3. Важно: Не забываем удалять обработчик событий (cleanup function), чтобы не нагружать память!


Вот готовый пример. Можете сохранить его в файл useWindowSize.js.


import { useState, useEffect } from 'react';

// Наш кастомный хук
function useWindowSize() {
// 1. Инициализируем состояние
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined,
});

useEffect(() => {
// Функция для обновления состояния
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}

// Устанавливаем размер сразу при загрузке
handleResize();

// 2. Добавляем слушатель события изменения размера окна
window.addEventListener("resize", handleResize);

// 3. Очистка: удаляем слушатель при размонтировании
return () => window.removeEventListener("resize", handleResize);
}, []); // Пустой массив зависимостей = запускаем один раз

return windowSize;
}

export default useWindowSize;


🚀 Как это использовать в компоненте?

Теперь ваш компонент становится чистым и понятным. Никакой лишней логики внутри!


import React from 'react';
import useWindowSize from './useWindowSize';

const App = () => {
// Просто вызываем наш хук
const { width, height } = useWindowSize();

return (

📏 Размер окна
Ширина: {width}px
Высота: {height}px

{width < 600 ? (
📱 Похоже, вы на мобильном устройстве!
) : (
💻 Это десктопная версия.
)}

);
};

export default App;

📲 Мы в MAX

✍️ @React_lib