Search
Write a publication
Pull to refresh

My feed

Type
Rating limit
Level of difficulty
Warning
To set up filters sign in or sign up
Post

Заголовок: Я переписал 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

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

Tags:
+1
Comments1
Post

Как разводят венчурных капиталистов на бабки по поводу процессоров

Когда в СМИ публикуют статью про новый революционный процессор, но в статье нет бенчмарок, тут все понятно: статью можно игнорировать, это просто мусорный набор символов на экране. А если бенчмарки есть? Тут тоже не все так просто. Лет 10 назад был стартап, который показывал венчурным капиталистам слайды, что их революционно гибкий процессор (который динамически выделял потоки) по тактам в 3 раза быстрее чем старшее ядро ARM. Измерение было с помощью симуляции на уровне регистровых передач и в качестве бенчмарки была то ли Dhrystone, то ли CoreMark/MHz. Но они "забыли" указать на слайдах, что если синтезировать их процессорное ядро c библиотекой ASIC на том же техпроцессе, на котором и ядро ARM, против которого они конкурируют - то статический анализ тайминга покажет, что максимальная тактовая частота, которую они могут использовать - втрое меньше, чем у ARM. То есть втрое лучше по тактам умножаем на втрое хуже по частоте = никакого улучшения. Об этом факте я случайно услышал на парти - человек сказал цифру и я сложил два плюс два, то бишь умножил 3 на 1/3.

Также замечу что развод на бабки VC ничуть не менее аморален, чем развод на бабки пенсионеров по телефону, так как в фонды VC вкладывают в том числе и частные пенсионные фонды.

Tags:
+12
Comments11
Post

Я сохраняю историческое наследние на Wikimedia Commons, например газеты 19 века, но их очень много - буду рад если вы присоединитесь, научу как там делать.

Вот например страница одной старой газеты https://commons.wikimedia.org/wiki/Category:Minskie_eparhialnye_vedomosti

Исторические данные важно сохранять - многое мы уже потеряли. Где-то библиотеки выкладывают на своих сайтиках отсканированное, где-то генеалоги за свои деньги заказывают сканы и потом публикуют в Google Drive, что-то берется с archive.org. Может у вас дома есть газеты 19 века?

Вот тут всё что я загрузил.

Например, одна из текущих задач - Могилевские Губернские Ведомости. В идеале их нужно не только загрузить, с правильным проставлением категорий по годам, но и вынуть тексты для другого сервиса ru.wikisource.org

Авторское право для газет 19 века уже истекло, так что это все легально.

Пример ценного
Пример ценного

Пишите кто тоже хочет загружать на Коммонс и спасать историю, делать её доступнее для анализа людьми и машинами.

Tags:
Total votes 4: ↑4 and ↓0+4
Comments2
2
1
2 ...