React Hooks library for data fetching.

The name β€œSWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861. 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.
Refer to official documentation for detailed usage. β†’


Pass an API key and start using it inside any function components:

import useSWR from 'swr';
const fetcher = url => fetch(url).then(r => r.json());
function Profile () {
const { data, error } = useSWR('/api/user/123', fetcher);
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
// render data
return <div>hello {data.name}!</div>

fetcher is an async function that accepts the key of SWR, and returns the data. You can use any library to handle data fetching.

import axios from 'axios';
const fetcher = url => axios.get(url).then(res => res.data);

Refer to official documentation on data fetching for detailed usage. β†’


useSWR also returns a mutate method that is pre-bound to SWR's key

import useSWR from 'swr';
function Profile () {
const { data, mutate } = useSWR('/api/user', fetcher);
return (
<h1>My name is {data.name}.</h1>
<button onClick={async () => {
const newName = data.name.toUpperCase();
// send a request to the API to update the data
await requestUpdateUsername(newName);
// update the local data immediately and revalidate (refetch)
// NOTE: key is not required when using useSWR's mutate as it's pre-bound
mutate({ ...data, name: newName });
}}>Uppercase my name!</button>

mutate can also be imported directly form swr

import useSWR, { mutate } from 'swr';
function App () {
return (
<Profile />
<button onClick={() => {
// set the cookie as expired
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
// tell all SWRs with this key to revalidate

Refer to official documentation on mutation for detailed usage. β†’

Adding SWR to your project later#

If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.

  • Install swr package.
npm install swr
Last updated on by Necati Γ–zmen