Понимание SWR

Машина состояния (State Machine)

useSWR возвращает data, error, isLoading и isValidating в зависимости от состояния функции fetcher. На этих диаграммах показано, как SWR возвращает значения в некоторых сценариях.

Выборка и Ревалидация

Этот шаблон предназначен для выборки данных и их дальнейшей ревалидации.

Смена ключа

Этот шаблон предназначен для выборки данных, изменения ключа и дальнейшей ревалидации.

Смена ключа + Предыдущие данные

Этот шаблон предназначен для выборки данных и смены ключа и дальнейшей ревалидации с параметром keepPreviousData.

Резервные данные (Fallback)

Этот шаблон предназначен для выборки данных и дальнейшей ревалидации с резервными данными.

Смена ключа + Резервные данные

Этот шаблон предназначен для выборки данных, смены ключа и дальнейшей ревалидации с резервными данными.

Смена ключа + Предыдущие данные + Резервные данные

Этот шаблон предназначен для выборки данных, смены ключа и дальнейшей ревалидации с параметром keepPreviousData и резервными данными.

Сочетание isLoading и isValidating для лучшего UX

По сравнению с существующим значением isValidating, isLoading — это новое свойство, которое может помочь вам в более общих случаях загрузки для UX.

• isValidating становится true всякий раз, когда есть текущий запрос независимо от того, загружены данные или нет
• isLoading становится true, когда есть текущий запрос и данные еще не загружены.

Проще говоря, вы можете использовать isValidating для указания каждый раз, когда происходит ревалидация, и isLoading для указания, что SWR проводит ревалидацию, но пока нет данных для отображения.

function Stock() {
  const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
    refreshInterval: 3000
  });
 
  // Если исходные данные всё ещё загружаются, отображать нечего.
  // Возвращаем сюда скелетон.
  if (isLoading) return <div className="skeleton" />;
 
  // В противном случае отобразите данные и спиннер,
  // указывающий на фоновую ревалидацию.
  return (
    <>
      <div>${data}</div>
      {isValidating ? <div className="spinner" /> : null}
    </>
  );
}

Вы можете найти пример кода здесь (opens in a new tab)

Возврат предыдущих данных для лучшего UX

При выполнении выборки данных на основе непрерывных действий пользователя, например поиск в реальном времени, при наборе текста сохранение ранее извлеченных данных может значительно улучшить UX. keepPreviousData — это опция, позволяющая включить это поведение. Вот простой интерфейс поиска:

function Search() {
  const [search, setSearch] = React.useState('');
 
  const { data, isLoading } = useSWR(`/search?q=${search}`, fetcher, {
    keepPreviousData: true
  });
 
  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Поиск..."
      />
 
      <div className={isLoading ? "загрузка" : ""}>
        {data?.products.map(item => <Product key={item.id} name={item.name} />)
      </div>
    </div>
  );
}

С включенным keepPreviousData вы все равно получите предыдущие данные, даже если вы измените ключ SWR, и данные для нового ключа снова начнут загружаться.

Вы можете найти полный код для этого примера здесь: https://codesandbox.io/s/swr-keeppreviousdata-fsjz3m (opens in a new tab).

Коллекция зависимостей для повышения производительности

SWR запускает повторный рендеринг только тогда, когда состояния, используемые в компоненте, были обновлены. Если вы используете только data в компоненте, SWR игнорирует обновления других свойств, таких как isValidating и isLoading. Это значительно снижает количество рендеринга. Дополнительную информацию можно найти здесь.