Какую библиотеку выбирал недавно?

Выбор библиотеки для современного Frontend: Vite + TanStack Query

В последнее время для новых проектов я делаю выбор в пользу связки Vite в качестве инструмента сборки и TanStack Query (ранее React Query) для управления состоянием данных, полученных с сервера. Этот выбор обусловлен необходимостью создания производительных, масштабируемых и удобных в разработке приложений.

Почему Vite?

Vite стал для меня заменой Create React App (CRA) и Webpack в большинстве сценариев. Его ключевые преимущества:

• Мгновенный запуск сервера разработки: Использует нативные ES-модули, что устраняет этап сборки при запуске dev. Сервер готов к работе за доли секунды, даже в больших проектах.
• Молниеносное обновление модулей (HMR): Обновления в коде отражаются в браузере почти мгновенно, сохраняя состояние приложения.
• Оптимизированная сборка для продакшена: Использует Rollup под капотом, что дает отличные результаты по умолчанию – код-сплиттинг, tree-shaking, оптимизация ассетов.

Пример конфигурации vite.config.js для React-проекта:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true // Для отладки в продакшене
  }
})

Почему TanStack Query?

Для управления данными с бэкенда (запросы к API, кэширование, синхронизация) TanStack Query стал бесспорным лидером. Он решает проблемы, которые раньше приходилось решать вручную или с помощью Redux + Thunk/Saga.

Ключевые возможности, которые делают его незаменимым:

• Интеллектуальное кэширование: Автоматически кэширует результаты запросов, управляет их сроком жизни, инвалидацией и фоновым обновлением.
• Фоновый рефетч: Данные могут автоматически обновляться при фокусе окна браузера или по интервалу, обеспечивая актуальность UI.
• Оптимистичные обновления: Позволяет мгновенно обновить UI после мутации, не дожидаясь ответа сервера, что улучшает воспринимаемую производительность.
• Пагинация и бесконечный скролл "из коробки": Предоставляет хелперы для удобной реализации этих паттернов.
• Структурированное управление состоянием загрузки и ошибок: Избавляет от рутинного написания isLoading, isError в каждом компоненте.

Пример использования TanStack Query для получения и мутации данных:

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'

// Хук для получения списка пользователей
function useUsers() {
  return useQuery({
    queryKey: ['users'], // Уникальный ключ для кэша
    queryFn: () => fetch('/api/users').then(res => res.json()),
    staleTime: 5 * 60 * 1000, // Данные считаются свежими 5 минут
  })
}

// Хук для добавления нового пользователя
function useAddUser() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: (newUser) => fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(newUser),
    }).then(res => res.json()),
    onSuccess: () => {
      // Инвалидируем кэш с ключом ['users'], чтобы Triggers автоматический рефетч
      queryClient.invalidateQueries({ queryKey: ['users'] })
    },
    // Можно добавить onError для обработки ошибок
  })
}

// Использование в компоненте
function UserList() {
  const { data, isLoading, error } = useUsers()
  const addUserMutation = useAddUser()

  if (isLoading) return <div>Загрузка...</div>
  if (error) return <div>Ошибка: {error.message}</div>

  return (
    <div>
      {data.map(user => <div key={user.id}>{user.name}</div>)}
      <button onClick={() => addUserMutation.mutate({ name: 'Новый' })}>
        Добавить
      </button>
    </div>
  )
}

Эта комбинация (Vite + TanStack Query) позволяет:

• Резко ускорить процесс разработки за счет инструментов Vite.
• Сократить объем шаблонного кода для работы с API на 50-70%.
• Повысить надежность за счет централизованной обработки ошибок, ретраев и синхронизации.
• Улучшить UX благодаря фоновому обновлению и оптимистичным UI-обновлениям.

Этот выбор отражает современный тренд на специализированные библиотеки, которые решают конкретные задачи лучше, чем монолитные решения прошлого (например, Redux для всего). Для глобального состояния UI (тема, модалки, стор фильтров) я часто дополняю стек более простыми инструментами, такими как Zustand или Jotai, которые идеально сочетаются с TanStack Query, разделяя ответственность за данные сервера и клиента.