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

1. Базовый пользовательский крючок:

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

import { useState, useEffect } from 'react';
const useDataFetcher = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, loading, error };
};
export default useDataFetcher;

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

2. Пользовательский перехватчик с зависимостями:

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

import { useState, useEffect } from 'react';
const useWindowResize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Empty dependency array ensures the effect runs only once
  return windowSize;
};
export default useWindowResize;

Этот пользовательский крючок отслеживает размеры окна и обновляет их при каждом изменении размера окна. Он демонстрирует использование зависимостей в пользовательских перехватчиках.

3. Пользовательский перехватчик с локальным хранилищем:

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

import { useState, useEffect } from 'react';
const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
};
export default useLocalStorage;

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

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

Не забудьте дать осмысленные имена вашим пользовательским хукам и организовать их для повторного использования. Приятного общения!