What is SWR Library in React?

This article provides a comprehensive overview of SWR, a popular React Hooks library for data fetching developed by Vercel. We will examine what SWR is, how its “stale-while-revalidate” strategy improves user experience, its core features such as caching and automatic revalidation, and how to implement it in your React projects to simplify state management.

Understanding SWR

SWR stands for Stale-While-Revalidate, an HTTP cache invalidation strategy. In simple terms, SWR first returns the data from the cache (stale), then sends the fetch request in the background (revalidate), and finally updates the UI with the up-to-date data.

Developed by Vercel, the creators of Next.js, SWR is a lightweight, backend-agnostic library designed specifically for React applications. It acts as a middleman between your React components and your API, handling caching, revalidation, and synchronization automatically.

How SWR Works in Practice

Instead of using standard React useEffect hooks to fetch data and manage loading and error states manually, SWR provides a custom hook called useSWR.

Here is a basic example of how it is implemented:

import useSWR from 'swr'

const fetcher = url => fetch(url).then(res => res.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>
}

In this example, useSWR accepts two main arguments: a unique key (usually the API URL) and a fetcher function. The fetcher function can be any asynchronous function that returns data (using fetch, Axios, or GraphQL).

Key Features of SWR

SWR comes packed with features that significantly improve both developer experience and application performance:

• Automatic Revalidation: SWR automatically refetches data when the user focuses back on the page (focus revalidation) or when they reconnect to the internet (network recovery).
• Caching and Deduplication: If you request the same data in multiple components simultaneously, SWR will send only one network request and share the cached result among all components.
• Interval Polling: SWR can automatically refetch data at set intervals to keep the UI in sync with real-time database changes.
• Optimistic UI Updates: SWR allows you to update the UI instantly (optimistically) before receiving confirmation from the server, rolling back the changes if the API request fails.
• Pagination and Infinite Scroll: SWR includes built-in helpers like useSWRInfinite to handle complex pagination and infinite scroll mechanisms effortlessly.

Why Choose SWR Over Traditional Fetching?

Traditionally, fetching data in React required writing repetitive boilerplate code inside useEffect hooks, coupled with useState to manage loading, error, and data states. This approach often leads to unnecessary re-renders, race conditions, and an inconsistent user experience.

SWR solves these problems by abstracting the state management of remote data. It ensures your application is fast by serving cached content immediately, while keeping the interface fresh by constantly validating data in the background.