Руководство по созданию кастомных хуков в React

React уже давно стал золотым стандартом в разработке Front End интерфейсов благодаря своей гибкости и мощным возможностям управления состоянием. Одним из ключевых инструментов в его арсенале являются хуки — функции, которые позволяют «подключаться» к жизненному циклу компонентов и управлять состоянием или побочными эффектами без использования классов. Но что делать, когда стандартные хуки не решают конкретную задачу? На помощь приходят react custom hooks — возможность создавать свои для повторного использования логики и улучшения структуры приложения.

А понять на практике, что такое фронт енд вы можете на курсах FoxmindEd.

Что такое хуки в React и зачем нужны кастомные хуки?

Еще раз, это такие функции, которые позволяют «подключаться» к возможностям React, таким как управление состоянием или побочные эффекты. Например, самый известный из них — useState, который используется для работы с состоянием в функциональных компонентах.

Кастомные хуки в React позволяют разработчику вынести повторяющуюся логику в отдельную функцию, что делает код более чистым и переиспользуемым. 

Основные принципы работы с хуками

Для начала разберемся в понимании базовых принципов:

1. Хуки вызываются только внутри функций компонентов или других хуков. Нельзя вызывать их внутри циклов, условий или вложенных функций.
2. Порядок вызова хуков критичен. Он должен оставаться неизменным при каждом рендере компонента.
3. Хуки следуют за компонентами. Если компонент «умирает», все хуки, вызванные в нем, также очищаются.

Когда и почему стоит создавать кастомные хуки?

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

Создание кастомного хука в React

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

Как создать простой кастомный хук с нуля?

Достаточно написать обычную функцию JavaScript, которая внутри себя использует один или несколько стандартных хуков React. Например, создадим useWindowWidth, который будет отслеживать ширину окна:

import { useState, useEffect } from 'react';

function useWindowWidth() {

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

  useEffect(() => {

    const handleResize = () => setWidth(window.innerWidth);

    window.addEventListener('resize', handleResize);

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

  }, []);

  return width;

}

Эта функция отслеживает изменение размера окна и возвращает текущую ширину. Теперь её можно применять в любом компоненте, так же как встроенные хуки.

FoxmindEd — это учебный центр с большим выбором направлений курсов для новичков и программистов с опытом!

Начинаете свой путь в IТ? Попробуйте курсы Start

Имеете базовые навыки программирования? Тогда вам на курсы Junior

Хотите углубить свои знания в IТ? У нас есть курсы Middle/Senior

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

Допустим, мы хотим создать хук, который будет управлять состоянием формы:

function useForm(initialValues) {

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

  const handleChange = (event) => {

    setValues({

      ...values,

      [event.target.name]: event.target.value,

    });

  };

  return [values, handleChange];

}

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

const [formValues, handleInputChange] = useForm({ username: '', email: '' });

Как передавать и использовать данные внутри кастомного хука?

Когда вы создаете кастомный хук, вы можете передавать ему любые данные через параметры, как обычной функции. В примере с useForm мы передаем начальные значения через аргумент initialValues, а внутри хука управляем состоянием с помощью useState.

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

Теперь давайте рассмотрим реальные примеры хуков в react и в более сложных сценариях.

Реализация кастомных хуков для работы с API

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

function useFetch(url) {

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

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

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

  useEffect(() => {

    fetch(url)

      .then((response) => response.json())

      .then((result) => {

        setData(result);

        setLoading(false);

      })

      .catch((error) => {

        setError(error);

        setLoading(false);

      });

  }, [url]);

  return { data, loading, error };

}

Пример кастомного хука для обработки событий

Допустим, вам нужно отслеживать события кликов вне компонента (например, закрытие выпадающего меню). Вместо копирования кода везде, где это нужно, можно создать функцию useOutsideClick:

function useOutsideClick(ref, callback) {

  useEffect(() => {

    const handleClickOutside = (event) => {

      if (ref.current && !ref.current.contains(event.target)) {

        callback();

      }

    };

    document.addEventListener('mousedown', handleClickOutside);

    return () => {

      document.removeEventListener('mousedown', handleClickOutside);

    };

  }, [ref, callback]);

}

Оптимизация повторного использования логики через хуки

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

Лучшая практика создания кастомных хуков

Как создать кастомный хук? Ведь это — не просто написание функций, а процесс, который требует внимательного подхода.

Как избежать типичных ошибок при создании хуков?

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

Рекомендации по организации и структуре кастомных хуков

Лучше всего выделять их в отдельные файлы и группировать по назначению. Например, функции для работы с API можно хранить в папке hooks/api, а для управления состоянием — в hooks/state.

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

Для тестирования удобно использовать библиотеки вроде react-testing-library. Всегда старайтесь писать юнит-тесты, чтобы убедиться, что функции работают корректно в изоляции от компонентов.