SWR - React Hooks for Data Fetching
January 23, 2024
The name “SWR” is derived from
stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861(opens in a new tab). SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.With SWR, components will get a stream of data updates constantly and automatically.\ And the UI will be always fast and reactive.
Example
import useSWR from 'swr'
async function fetcher(endpoint) {
const response = await fetch(endpoint);
const json = await response.json();
if (!json.ok) {
throw json;
}
return json;
}
function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (isLoading) return <div>loading...</div>
return <div>hello {data.name}!</div>
}