Кастомные хуки (Custom Hooks). Создаем свой первый кастомный хук useWindowSize — 29 июля 2026 г. в 07:14:52.678
Кастомные хуки (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 ( <div style={{ textAlign: 'center', marginTop: '50px' }}> <h1>📏 Размер окна</h1> <p>Ширина: <strong>{width}px</strong></p> <p>Высота: <strong>{height}px</strong></p> {width < 600 ? ( <p>📱 Похоже, вы на мобильном устройстве!</p> ) : ( <p>💻 Это десктопная версия.</p> )} </div> ); }; export default App; ✍️ @React_lib