Ką manai apie būsenos saugojimą naudojant bibliotekas kaip React Query ar SWR?

Библиотеки типа React Query или SWR отлично подходят для управления состоянием, связанным с асинхронными запросами к серверу (данные из API). Они абстрагируют логику кэширования, обновления, повторных запросов и синхронизации данных.

Плюсы:

• Упрощают работу с серверным состоянием, уменьшая количество кода.
• Автоматически обновляют данные при изменениях.
• Позволяют легко реализовать оптимистичные обновления и повторные попытки.

Минусы:

• Не предназначены для локального UI-состояния (например, открытие модальных окон).
• Могут добавить сложность, если использовать их для всего состояния без разбора.

В целом, хранить состояние, связанное с данными с сервера, через React Query или SWR — хорошая практика. Для UI-состояния лучше использовать локальный state или специализированные менеджеры (Redux, Zustand и т.п.).

Пример с React Query:

import { useQuery } from 'react-query';

function Users() {
  const { data, error, isLoading } = useQuery('users', () => fetch('/api/users').then(res => res.json()));

  if (isLoading) return 'Загрузка...';
  if (error) return 'Ошибка загрузки';

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