SWR: React Hooks for Data Fetching

The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861.

Advantages of Using SWR

• Real-time Data: Keeps your data updated in real-time by fetching the latest data while serving stale data from the cache.
• Simplicity: Provides a simple API for data fetching with hooks, making it easy to use.
• Performance: Improves performance by reducing the need for repeated requests and using caching effectively.
• Optimistic UI: Enhances user experience by showing cached data immediately while revalidating in the background.
• Automatic Revalidation: Automatically revalidates data in the background without blocking the UI.

How to Use SWR

First, install SWR in your project:

npm install swr

Next, import and use the useSWR hook in your React component:

import useSWR from 'swr';

function fetcher(url) {
  return fetch(url).then(res => res.json());
}

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);

  if (error) return 
failed to load
;
  if (isLoading) return 
loading...
;
  return 
hello {data.name}!
;
}

Examples

Here are some examples of how to use SWR in different scenarios:

Basic Example

import useSWR from 'swr';

function fetcher(url) {
  return fetch(url).then(res => res.json());
}

function App() {
  const { data, error, isLoading } = useSWR('/api/data', fetcher);

  if (error) return 
failed to load
;
  if (isLoading) return 
loading...
;

  return (
    < div >
      < h1 >Data from API< /h1 >
      < pre >{JSON.stringify(data, null, 2)}< /pre >
    < /div >
  );
}

Using SWR with Authentication

import useSWR from 'swr';

function fetchWithAuth(url) {
  return fetch(url, {
    headers: {
      'Authorization': 'Bearer ' + localStorage.getItem('token')
    }
  }).then(res => res.json());
}

function AuthData() {
  const { data, error, isLoading } = useSWR('/api/protected', fetchWithAuth);

  if (error) return 
failed to load
;
  if (isLoading) return 
loading...
;

  return (
    < div >
      < h1 >Protected Data< /h1 >
      < pre >{JSON.stringify(data, null, 2)}< /pre >
    < /div >
  );
}

How to Include SWR in Your Projects

1. Install the SWR library using npm or yarn.
2. Import the useSWR hook in your React components.
3. Create a fetcher function to handle data fetching from your API.
4. Use the useSWR hook in your component to fetch and manage data.
5. Handle loading and error states to provide a smooth user experience.

By following these steps, you can easily integrate SWR into your React projects and take advantage of its powerful data-fetching capabilities.

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:

• Fast, lightweight and reusable data fetching: Say goodbye to cumbersome data handling processes and enjoy a smoother development experience.
• Built-in cache and request deduplication: Improve efficiency and performance by eliminating redundant requests and utilizing a smart caching mechanism.
• Real-time experience: Keep your data up-to-date and responsive with real-time capabilities.
• Transport and protocol agnostic: Enjoy flexibility and adaptability with support for various transport and protocol options.
• SSR / ISR / SSG support: Seamlessly integrate server-side rendering, incremental static regeneration, and static site generation.
• TypeScript ready: Leverage the power of TypeScript for better type safety and developer experience.
• React Native: Extend your data fetching capabilities to mobile applications with React Native support.

More details here