useSWR Hook: Fetching, Loading, and Error States

useSWR(key, fetcher, options) is the primary hook. key is the cache key (usually a URL string), fetcher is the async function that returns data, and options is an optional configuration object.

The hook returns an object with data, error, isLoading, isValidating, and the mutate function.

The key can be a string URL, an array of [url, params], or null. String keys map to simple GET requests. Array keys allow you to embed variables like userId or filters into the cache identity.

Passing null disables the request entirely, useful for conditional fetching when required data is not yet available.

The fetcher receives the key (or array key spread as arguments) and must return a Promise. The resolved value becomes data. If the fetcher throws, the error property is set.

Example: (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

data is undefined while loading for the first time and equals the resolved fetcher value after success. error is undefined unless the fetcher threw, in which case it holds the thrown error object.

Check if (error) to render an error message, and if (!data) to render a loading skeleton, providing clear fallback UIs.

isLoading is true only when there is no cached data and a request is in flight: the first-ever load for this key. isValidating is true any time a request is in flight, including background revalidations when cached data already exists.

Use isLoading for skeleton screens; use isValidating for a subtle spinner indicating a background refresh.

SWRConfig lets you define default fetcher, dedupingInterval, refreshInterval, onError handler, and other options for all useSWR calls within its subtree. This centralizes configuration rather than repeating options in every hook.

Nest multiple SWRConfig providers to have different defaults for different sections of your app.

Pass null as the key to skip the request: useSWR(isLoggedIn ? '/api/user' : null, fetcher). SWR will not fetch until the key becomes a non-null value.

This is cleaner than the skip option in React Query. The key transitioning from null to a string automatically triggers the first fetch.

Chain SWR hooks for dependent requests: const { data: user } = useSWR('/api/me', fetcher) then const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher). The second hook waits until the first resolves.

This pattern avoids useEffect chains and keeps data dependencies declarative and readable.

If a Header component and a Sidebar component both call useSWR('/api/user', fetcher), SWR fires only one request and shares the result. Both components re-render together when data or error updates.

This deduplication happens automatically within the dedupingInterval window (default 2000ms) without any extra configuration.

refreshInterval: 5000 polls every 5 seconds. refreshWhenHidden: false stops polling when the tab is not visible. shouldRetryOnError: false disables automatic retry. revalidateOnFocus: false disables focus-triggered revalidation.

Combine options to match your data freshness requirements: dashboards often use refreshInterval, while static content sets revalidateOnFocus: false.

For paginated data, include the page number in the key: useSWR(['/api/items', page], fetcher). Changing page triggers a new fetch for that page while caching previous pages.

SWR also provides useSWRInfinite for cursor-based or infinite scroll patterns with a getKey function that builds keys based on page index and previous page data.

What happens when you pass null as the key to useSWR?

useSWR(key, fetcher) returns data, error, isLoading, and isValidating. Null keys disable fetching for conditional and dependent requests. isLoading indicates the first load; isValidating indicates any in-flight request. SWRConfig centralizes defaults, and request deduplication across components is automatic.

Options like refreshInterval, revalidateOnFocus, and shouldRetryOnError fine-tune data freshness behavior per hook or globally.