> Как работает lazy загрузка в useSWR (React)

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

Lazy загрузка в useSWR - это механизм отложенного выполнения запроса до момента, когда данные действительно понадобятся. Реализуется через опцию revalidateIfStale: false в комбинации с dedupingInterval, либо через условный вызов хука с null в качестве ключа. Позволяет избежать лишних сетевых запросов при монтировании компонента, если данные ещё не нужны.

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

useSWR по умолчанию выполняет запрос сразу после монтирования компонента. Lazy загрузка откладывает этот запрос до явного требования. Основные подходы:

1. Условный ключ: передача null в качестве ключа отключает запрос. Когда ключ становится строкой - запрос выполняется. Это наиболее чистый способ, так как SWR сам управляет состоянием.

2. Опция revalidateIfStale: при false SWR не будет автоматически обновлять данные, если они есть в кеше, но первый запрос всё равно произойдёт при монтировании.

3. Комбинация с useSWRImmutable: хук, который не делает revalidation, но первый запрос всё равно выполняется.

Для полной lazy загрузки используется условный ключ. Когда компонент монтируется с key = null, SWR не делает запрос, не создаёт кеш и не вызывает ошибок. При изменении ключа на валидный URL запускается fetch.

Важно: lazy загрузка не отменяет deduplication - если несколько компонентов запрашивают один ключ, запрос выполняется один раз.

На практике

Lazy загрузка применяется в сценариях:

• Табы или аккордеоны: данные загружаются только при активации вкладки
• Модальные окна: запрос выполняется при открытии, а не при монтировании приложения
• Infinite scroll: подгрузка данных при скролле до определённого элемента
• Условный рендеринг: данные нужны только при определённом состоянии компонента

При реализации важно учитывать:

• Ключ должен быть стабильным - не менять каждую рендер
• При смене ключа с null на URL старые данные из кеша не используются, если кеш пуст
• Для кеширования уже загруженных данных используйте fallbackData или глобальный кеш SWR

Пример кода

JSX
import useSWR from 'swr'
import { useState } from 'react'

function UserProfile() {
  const [shouldLoad, setShouldLoad] = useState(false)
  const [userId, setUserId] = useState(null)

  // Запрос выполнится только когда userId станет не null
  const { data, error, isValidating } = useSWR(
    userId ? `/api/users/${userId}` : null,
    fetcher,
    { revalidateOnFocus: false }
  )

  return (
    <div>
      <button onClick={() => { setUserId(1); setShouldLoad(true) }}>
        Загрузить профиль
      </button>
      
      {shouldLoad && (
        <div>
          {isValidating && <p>Загрузка...</p>}
          {error && <p>Ошибка: {error.message}</p>}
          {data && <p>Имя: {data.name}</p>}
        </div>
      )}
    </div>
  )
}

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

Начни с определения lazy загрузки в контексте SWR. Объясни, что это не встроенная опция, а паттерн, реализуемый через условный ключ. Приведи пример с null ключом. Упомяни, что SWR сам управляет состоянием запроса при смене ключа. Сравни с альтернативами: revalidateIfStale не даёт полной lazy загрузки. Подчеркни, что lazy загрузка не влияет на deduplication и кеширование. Добавь про типичные use cases: табы, модалки, условный рендеринг. Закончи упоминанием, что при смене ключа с null на URL старый кеш не используется, если он пуст.

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

• Понимание жизненного цикла запросов в SWR
• Умение различать механизмы: conditional fetching, revalidation, deduplication
• Знание trade-off: lazy загрузка vs предзагрузка данных
• Способность применить паттерн в реальных сценариях
• Понимание, что SWR - это не только fetching, но и state management

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

• Путают lazy загрузку с отложенным revalidation через revalidateIfStale
• Думают, что useSWR(null, fetcher) вызовет ошибку - на самом деле запрос не выполняется
• Меняют ключ каждый рендер, вызывая бесконечные запросы
• Не учитывают, что при смене ключа с null на URL данные не берутся из кеша, если кеш пуст
• Используют shouldFetch boolean вместо условного ключа, что усложняет код