Создание переиспользуемой логики с помощью кастомных хуков в React

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

Введение

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

Основная часть

Что такое кастомные хуки?

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

Пример:

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

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

import useFetch from "./useFetch";

function Users() {
  const { data, loading, error } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error}</p>;

  return (
    <div>
      {data.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

Практическое применение

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

Пример хука для управления счетчиком:

import { useState } from "react";

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount((prev) => prev + 1);
  };

  const decrement = () => {
    setCount((prev) => prev - 1);
  };

  const reset = () => {
    setCount(initialValue);
  };

  return {
    count,
    increment,
    decrement,
    reset,
  };
}

export default useCounter;

Использование в компоненте:

import useCounter from "./useCounter";

function Counter() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Заключение

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

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

Источник: https://dev.to/kathirvel-s/build-reusable-logic-with-custom-hooks-in-react-31bp