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

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

Основной принцип создания пользовательских хуков заключается в том, что они следуют тем же правилам, что и стандартные хуки, такие как useState и useEffect. Имя хука всегда должно начинаться с префикса use. Это помогает React идентифицировать хуки и применять проверки корректности их вызовов.

Пример: вы разрабатываете приложение с функционалом для отслеживания ширины окна. Вместо того чтобы копировать логику отслеживания в каждом компоненте, вы можете вынести её в отдельный пользовательский хук useWindowWidth.

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

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

Пример создания хука useWindowWidth:

import { useState, useEffect } from 'react';



function useWindowWidth() {

  const [width, setWidth] = useState(window.innerWidth);



  useEffect(() => {

    function handleResize() {

      setWidth(window.innerWidth);

    }



    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);

  }, []);



  return width;

}

Хук useWindowWidth возвращает текущее значение ширины окна. Мы используем useState для хранения ширины и useEffect для обновления состояния при изменении размера окна. Внутри useEffect добавляется слушатель событий и возвращается функция очистки, чтобы избежать утечек памяти.

Теперь вы можете использовать этот хук в любом компоненте:

function MyComponent() {

  const width = useWindowWidth();



  return <div>Текущая ширина окна: {width}px</div>;

}

Внедрение более сложной логики в пользовательские хуки

Хуки не ограничиваются простыми функциями. Вы можете создавать хуки с более сложной логикой, включая обработку API-запросов или управление анимацией. Например, давайте создадим хук useFetch, который будет использоваться для получения данных из API.

Пример создания хука useFetch:

import { useState, useEffect } from 'react';



function useFetch(url) {

  const [data, setData] = useState(null);

  const [loading, setLoading] = useState(true);

  const [error, setError] = useState(null);



  useEffect(() => {

    setLoading(true);

    fetch(url)

      .then(response => {

        if (!response.ok) {

          throw new Error('Ошибка сети');

        }

        return response.json();

      })

      .then(data => {

        setData(data);

        setLoading(false);

      })

      .catch(err => {

        setError(err);

        setLoading(false);

      });

  }, [url]);



  return { data, loading, error };

}

Хук useFetch принимает URL-адрес и выполняет запрос для получения данных. Состояния loading, data, и error управляют состоянием загрузки, хранения данных и обработкой ошибок соответственно. Хук обновляет эти состояния по мере выполнения запроса.

Использование useFetch в компоненте может выглядеть так:

function DataFetchingComponent() {

  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');



  if (loading) return <div>Загрузка...</div>;

  if (error) return <div>Ошибка: {error.message}</div>;



  return (

    <ul>

      {data.map(post => (

        <li key={post.id}>{post.title}</li>

      ))}

    </ul>

  );

}

Хуки для сложных компонентов

Создание пользовательских хуков помогает разделить сложные компоненты на более простые и повторно используемые части. Рассмотрим хук useForm, который упростит работу с формами, позволяя управлять их состоянием и обработкой изменений.

Пример создания хука useForm:

import { useState } from 'react';



function useForm(initialValues) {

  const [values, setValues] = useState(initialValues);



  function handleChange(event) {

    const { name, value } = event.target;

    setValues({

      ...values,

      [name]: value,

    });

  }



  return {

    values,

    handleChange,

  };

}

Хук useForm принимает объект с начальными значениями и возвращает текущее состояние формы, а также функцию для обработки изменений полей. Это позволяет значительно упростить код компонентов, использующих формы.

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

function FormComponent() {

  const { values, handleChange } = useForm({ name: '', email: '' });



  function handleSubmit(event) {

    event.preventDefault();

    console.log('Отправка данных:', values);

  }



  return (

    <form onSubmit={handleSubmit}>

      <label>

        Имя:

        <input type="text" name="name" value={values.name} onChange={handleChange} />

      </label>

      <label>

        Email:

        <input type="email" name="email" value={values.email} onChange={handleChange} />

      </label>

      <button type="submit">Отправить</button>

    </form>

  );

}

Создание пользовательских хуков не только делает ваш код более чистым и понятным, но и значительно упрощает поддержку и развитие проекта в долгосрочной перспективе.