ReactJS *

Заголовок: Я переписал react-query | Легковесный хук для асинхронного получения данных и кэширования в React

Привет всем!

Я разработал легковесный React-хук, аналогичный React Query, с основными функциями: получение данных, кэширование, повторные попытки и др. Он компактнее и проще в настройке. Полный код доступен на GitHub и в npm как api-refetch.

Зачем создавать собственный хук?

1. Легковесность: React Query и SWR мощные, но крупные. Мой хук идеален, когда важен размер пакета, особенно для зависимостей вроде Intlayer.

2. Настройка и оптимизация: Возможность хранения данных в локальном хранилище и управления параллельными запросами. Копируя или клонируя код, можно удалить ненужные функции, уменьшив размер бандла и повысив производительность.

3. Без провайдера: Избегаю использования Context Provider для глобального доступа, предлагая версию на базе Zustand.

4. Учебное упражнение: Понимание внутренностей кэширования и управления состоянием.

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

Функции

• Получение данных и управление состоянием: Загрузка, ошибки, успешные данные.

• Кэширование и хранение: Через React или Zustand, поддержка локального хранилища.

• Повторные попытки и валидация: Настраиваемые лимиты и интервалы.

• Активация и инвалидизация: Управление запросами в зависимости от других данных.

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

Пример использования

Установка

Клонируйте репозиторий или установите через npm:

npm install api-refetch

Быстрый пример

import { AsyncStateProvider, useAsync } from "api-refetch";

function App() {
  return (
    <AsyncStateProvider>
      <UserDetails />
    </AsyncStateProvider>
  );
}

const fetchUserData = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: "John Doe" });
    }, 1000);
  });
};

const UserDetails = () => {
  const { isLoading, data, error, revalidate } = useAsync(
    "userDetails",
    fetchUserData,
    {
      enable: true,
      cache: true,
      store: true,
      retryLimit: 3,
      retryTime: 10000,
      autoFetch: true,
      revalidation: true,
      revalidateTime: 300000,
      onSuccess: (data) => console.log("Данные получены:", data),
      onError: (error) => console.error("Ошибка:", error),
    }
  );

  if (isLoading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка: {error}</div>;
  return (
    <div>
      <h1>{data?.name}</h1>
      <button onClick={revalidate}>Обновить</button>
    </div>
  );
};

Попробуйте api-refetch, сообщите об ошибках или внесите вклад. Обратная связь приветствуется!

GitHub: api-refetch

Счастливого кодинга!