В React пользовательские хуки (custom hooks) являются мощным инструментом для повторного использования логики состояния и побочных эффектов в ваших компонентах. Они позволяют вам извлекать и делиться логикой между компонентами без необходимости изменять их структуру. В этой статье мы подробно рассмотрим, как создать и использовать пользовательские хуки в приложении на React.

Что такое пользовательские хуки?

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

Как создать пользовательский хук?

Создание пользовательского хука — это просто создание функции, которая использует встроенные хуки React. Вот пример простого пользовательского хука, который отслеживает размер окна:

import { useState, useEffect } from 'react';

function useWindowSize() {
    const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

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

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

    return size;
}

В этом примере мы создаем хук useWindowSize, который возвращает объект с текущими размерами окна. Мы используем useState для хранения размеров и useEffect для добавления обработчика события изменения размера окна.

Как использовать пользовательский хук?

Чтобы использовать созданный хук, просто вызовите его в вашем компоненте так же, как вы делаете с любым встроенным хуком:

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

function MyComponent() {
    const size = useWindowSize();

    return (
        

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

Теперь, когда размер окна изменяется, компонент MyComponent будет автоматически обновляться, отображая новые размеры.

Советы по созданию пользовательских хуков

• Соблюдайте правила хуков: Всегда вызывайте хуки на верхнем уровне функциональных компонентов и не вызывайте их внутри условий или циклов.
• Объединяйте логику: Если у вас есть несколько хуков, которые могут быть использованы вместе, создайте новый пользовательский хук, который будет их объединять.
• Документируйте хуки: Пишите документацию для ваших хуков, чтобы другие разработчики могли легко понять, как их использовать.
• Тестируйте ваши хуки: Убедитесь, что ваши пользовательские хуки работают правильно, написав для них тесты.

Пример использования нескольких пользовательских хуков

Рассмотрим более сложный пример, в котором мы будем использовать несколько пользовательских хуков. Предположим, мы хотим отслеживать как размер окна, так и положение мыши:

import { useState, useEffect } from 'react';

function useMousePosition() {
    const [position, setPosition] = useState({ x: 0, y: 0 });

    useEffect(() => {
        const handleMouseMove = (event) => {
            setPosition({ x: event.clientX, y: event.clientY });
        };

        window.addEventListener('mousemove', handleMouseMove);
        return () => window.removeEventListener('mousemove', handleMouseMove);
    }, []);

    return position;
}

function MyComponent() {
    const size = useWindowSize();
    const position = useMousePosition();

    return (
        

            
Размер окна:
            
Ширина: {size.width}px
            
Высота: {size.height}px
            
Положение мыши:
            
X: {position.x}px
            
Y: {position.y}px
        
    );
}

В этом примере мы создали еще один хук useMousePosition, который отслеживает положение мыши. Теперь наш компонент MyComponent может использовать оба хука для отображения информации о размере окна и положении мыши.

Заключение

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