Website development — Making the Web Better / Habr

Multilingualism in startups

When launching a startup, don’t make it multilingual until you have stable revenue and a team to support it. You can’t know whether the startup will become profitable, so early on, your time is better spent finding PMF and acquiring users. AI can write scripts to manage translation files and help with text translation, but the quality will still be poor. Users might as well use the browser’s built-in translator.

If you build the service in 10 languages right away, you’ll struggle to maintain it. Every interface change means updating translation files across all languages, even though most of your users will likely understand an English interface anyway. But if you’re building for a specific country, build it in that country’s language and don’t add English. Even two languages at the start are worse than one. With a single language, you can keep text directly in the code instead of splitting it into separate translation files.

Blog • Telegram • Bluesky

-1

aymericzip

Jan 7 2025 at 14:1091

Website development * JavaScript * ReactJS *

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

Привет всем!

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

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

Легковесность: React Query и SWR мощные, но крупные. Мой хук идеален, когда важен размер пакета, особенно для зависимостей вроде Intlayer.
Настройка и оптимизация: Возможность хранения данных в локальном хранилище и управления параллельными запросами. Копируя или клонируя код, можно удалить ненужные функции, уменьшив размер бандла и повысив производительность.
Без провайдера: Избегаю использования Context Provider для глобального доступа, предлагая версию на базе Zustand.
Учебное упражнение: Понимание внутренностей кэширования и управления состоянием.

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

Функции

Получение данных и управление состоянием: Загрузка, ошибки, успешные данные.
Кэширование и хранение: Через 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

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