SWR

React Hooks library for data fetching

Lightweight

Backend Agnostic

Realtime

JAMstack Oriented

TypeScript Ready

Remote + Local

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.

Overview

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

In this example, the useSWR hook accepts a key string and a fetcher function. key is a unique identifier of the data (normally the API URL) and will be passed to fetcher. fetcher can be any asynchronous function which returns the data, you can use the native fetch or tools like Axios.

The hook returns 2 values: data and error, based on the status of the request.

Features

With just one single line of code, you can simplify the logic of data fetching in your project, and also have all these amazing features out-of-the-box: