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

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Библио-Глобус

Стек: React

> Пример ответа

Lazy-загрузка в useSWR реализуется через параметр revalidateIfStale: false в комбинации с условной выборкой. Основная идея - отложить выполнение запроса до момента, когда данные действительно понадобятся, например, при открытии модального окна или скролле до элемента.

Пример:

JSX
const { data } = useSWR(shouldFetch ? '/api/data' : null, fetcher);

Когда shouldFetch равен false, SWR не выполняет запрос, а возвращает undefined. Как только условие становится истинным, запрос запускается автоматически. Это позволяет избежать ненужных сетевых вызовов при начальном рендере.

Дополнительно можно использовать useSWRImmutable для кэширования без автоматической ревалидации, или настроить dedupingInterval для контроля частоты запросов. Такой подход эффективен для больших списков, данных, загружаемых по требованию, или для компонентов, которые монтируются позже (например, вкладки или аккордеоны).