> Какие опции есть у useSWR или useSWRData (React)

Короткий ответ

useSWR и useSWRData принимают три основных аргумента: ключ (key), fetcher-функцию и объект опций. Ключевые опции включают revalidateOnFocus, revalidateOnReconnect, refreshInterval, dedupingInterval, errorRetryCount, loadingTimeout, fallbackData, keepPreviousData, onSuccess, onError, onErrorRetry, compare, isPaused, fallback, use, revalidateIfStale, revalidateOnMount, shouldRetryOnError, errorRetryInterval и focusThrottleInterval.

Подробное объяснение

useSWR - это хук для кэширования и ревалидации данных, построенный на стратегии stale-while-revalidate. Опции делятся на несколько категорий:

Управление ревалидацией:

• revalidateIfStale (default: true) - ревалидировать ли данные при монтировании, если есть закэшированные данные
• revalidateOnMount (default: true) - ревалидировать при первом монтировании
• revalidateOnFocus (default: true) - ревалидировать при фокусе окна
• revalidateOnReconnect (default: true) - ревалидировать при восстановлении сети
• refreshInterval (default: 0) - интервал автоматической ревалидации в ms
• refreshWhenHidden (default: false) - продолжать ли refresh, когда вкладка неактивна
• refreshWhenOffline (default: false) - продолжать ли refresh при офлайн

Управление кэшем и дедупликацией:

• dedupingInterval (default: 2000ms) - интервал дедупликации одинаковых запросов
• focusThrottleInterval (default: 5000ms) - минимальный интервал между ревалидациями при фокусе
• loadingTimeout (default: 3000ms) - таймаут для состояния loading
• errorRetryInterval (default: 5000ms) - интервал между повторными попытками при ошибке
• errorRetryCount (default: infinite) - максимальное количество ретраев

Управление данными:

• fallbackData - начальные данные до загрузки
• keepPreviousData (default: false) - сохранять ли предыдущие данные при загрузке новых
• compare - функция сравнения для определения изменения данных
• isPaused - функция, возвращающая true для приостановки ревалидации
• fallback - глобальный объект с fallback данными для ключей

Колбэки:

• onSuccess - вызывается после успешной загрузки
• onError - вызывается при ошибке
• onErrorRetry - вызывается перед повторной попыткой при ошибке

Middleware:

• use - массив middleware функций для расширения функциональности

На практике

Наиболее часто используемые опции в production:

1. refreshInterval - для polling данных в реальном времени (например, статус задачи)
2. revalidateOnFocus - часто отключают для избежания лишних запросов
3. keepPreviousData - для плавного UX при переключении страниц
4. fallbackData - для SSR/SSG с Next.js
5. errorRetryCount - для контроля количества ретраев

Важно понимать trade-off: слишком частые ревалидации могут нагружать сервер, а слишком редкие - показывать устаревшие данные.

Пример кода

TYPESCRIPT
import useSWR from 'swr'

// Базовая конфигурация с polling
const { data, error, isValidating } = useSWR(
  '/api/user',
  fetcher,
  {
    refreshInterval: 30000, // обновление каждые 30 секунд
    revalidateOnFocus: false, // отключаем ревалидацию при фокусе
    keepPreviousData: true, // сохраняем старые данные при загрузке
    errorRetryCount: 3, // максимум 3 ретрая
    onSuccess: (data) => {
      console.log('Data loaded:', data)
    },
    onError: (err) => {
      console.error('Failed to load:', err)
    }
  }
)

// Конфигурация для SSR с fallback
const { data } = useSWR(
  '/api/posts',
  fetcher,
  {
    fallbackData: initialPosts, // данные с сервера
    revalidateIfStale: false, // не ревалидировать при монтировании
  }
)

Как отвечать на собеседовании

Начни с перечисления основных опций, затем сгруппируй их по назначению. Покажи понимание, когда какую опцию использовать. Упомяни, что опции можно задавать глобально через SWRConfig. Приведи примеры из реальной практики: polling для чата, отключение ревалидации для статичных данных, fallback для SSR.

Что проверяет интервьюер

• Глубину знания библиотеки, а не только базового использования
• Понимание концепции stale-while-revalidate
• Умение выбирать правильные опции под конкретные сценарии
• Знание оптимизаций: дедупликация, throttling, retry logic
• Понимание работы с кэшем и состояниями загрузки

Типичные ошибки

• Путаница между fallbackData и fallback (глобальный vs локальный)
• Забывают про keepPreviousData для плавного UX
• Не отключают revalidateOnFocus для часто обновляемых данных
• Используют refreshInterval без учета refreshWhenHidden
• Не настраивают errorRetryCount, что ведет к бесконечным ретраям
• Путают isValidating и isLoading (первый true при любой ревалидации, второй только при первой загрузке)