> Как вызвать useSWR по нажатию на кнопку, чтобы он не вызывался сразу (React)

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

useSWR по умолчанию выполняет запрос при монтировании компонента. Чтобы отложить вызов до нажатия кнопки, используйте опцию revalidateIfStale: false и управляйте ключом: передавайте null или функцию, возвращающую null, пока кнопка не нажата. При нажатии меняете ключ на реальный URL - SWR выполнит запрос. Альтернатива - использовать mutate с ручным вызовом.

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

useSWR работает по принципу: ключ определяет, когда делать запрос. Если ключ - null, запрос не выполняется. Это основной механизм для отложенной загрузки. Когда ключ становится строкой или объектом, SWR автоматически запускает fetch.

Дополнительно, опция revalidateIfStale: false предотвращает повторные запросы при монтировании, если данные уже есть в кеше. Для полного контроля используйте mutate - функция, возвращаемая useSWR, позволяет вручную инициировать запрос с новыми данными.

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

На практике

Типичный сценарий - форма поиска или фильтрации, где запрос должен выполняться только после явного действия пользователя. Используйте useState для хранения активного ключа. При нажатии кнопки обновляйте состояние, что триггерит новый запрос через useSWR.

Для более сложных случаев, когда нужно сохранить предыдущие данные до завершения нового запроса, используйте опцию keepPreviousData: true. Это улучшает UX, избегая пустых экранов.

Пример кода

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

function SearchComponent() {
  const [searchKey, setSearchKey] = useState(null);

  const { data, error, isLoading } = useSWR(
    searchKey,
    () => fetch(`/api/search?q=${searchKey}`).then(res => res.json()),
    { revalidateIfStale: false }
  );

  const handleSearch = () => {
    setSearchKey('example'); // меняем ключ - запрос выполняется
  };

  return (
    <div>
      <button onClick={handleSearch} disabled={isLoading}>
        {isLoading ? 'Загрузка...' : 'Поиск'}
      </button>
      {error && <div>Ошибка</div>}
      {data && <div>Результаты: {data.length}</div>}
    </div>
  );
}

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

Начните с ключевого механизма: useSWR не вызывает запрос, если ключ - null. Объясните, что это основной паттерн для отложенной загрузки. Упомяните альтернативу с mutate для случаев, когда нужно переиспользовать тот же ключ, но с новыми параметрами. Приведите пример с кнопкой и useState. Подчеркните важность опции revalidateIfStale для предотвращения нежелательных запросов при монтировании.

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

Интервьюер оценивает понимание жизненного цикла SWR и механизма ключей. Важно показать, что вы различаете автоматический вызов при монтировании и ручное управление через ключ. Также проверяется знание опций конфигурации и умение применять их в реальных сценариях. Ожидается, что senior-разработчик предложит чистое решение без лишних эффектов или костылей.

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

• Использование useEffect для вызова mutate при нажатии кнопки - это избыточно, достаточно изменить ключ.
• Забывают про revalidateIfStale: false, из-за чего запрос может выполниться дважды.
• Передают в ключ объект, который меняется при каждом рендере, вызывая бесконечные запросы - нужно стабилизировать через useMemo.
• Пытаются использовать shouldFetch опцию, которой нет в SWR - правильный путь через null-ключ.