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

Чтобы вызвать useSWR только по нажатию на кнопку, а не сразу при монтировании компонента, нужно использовать опцию revalidateIfStale: false и revalidateOnFocus: false, а также управлять запросом через ключ, который изначально равен null. Когда ключ равен null, SWR не выполняет запрос. При клике на кнопку меняем ключ на нужное значение, и запрос выполняется.

Пример:

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

const fetcher = (url) => fetch(url).then((res) => res.json());

function DataFetcher() {
  const [shouldFetch, setShouldFetch] = useState(false);
  const { data, error, isValidating } = useSWR(
    shouldFetch ? '/api/data' : null,
    fetcher,
    {
      revalidateIfStale: false,
      revalidateOnFocus: false,
    }
  );

  const handleClick = () => {
    setShouldFetch(true);
  };

  return (
    <div>
      <button onClick={handleClick} disabled={shouldFetch}>
        Загрузить данные
      </button>
      {isValidating && <p>Загрузка...</p>}
      {error && <p>Ошибка: {error.message}</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

В этом примере useSWR не вызывается, пока shouldFetch равно false. После клика по кнопке shouldFetch становится true, и SWR выполняет запрос. Дополнительные опции предотвращают повторные запросы при фокусе или устаревании данных.