SWR (Stale-While-Revalidate) is a React hook library for data fetching that focuses on simplicity and efficiency. It allows you to fetch data, handle caching, and automatically revalidate data in the background. SWR helps you manage data fetching and state updates with minimal boilerplate and offers a set of advanced features like pagination, error handling, and caching.

Key Concepts of SWR:

1. Stale-While-Revalidate: The term “stale-while-revalidate” means that SWR will return the cached (stale) data immediately while it revalidates the data in the background to fetch fresh data from the server.
2. Cache: SWR automatically caches the fetched data and reuses it to avoid redundant requests.
3. Revalidation: SWR allows you to revalidate and fetch fresh data either on demand or at a specified interval.
4. Focus and Reconnect: SWR will automatically re-fetch data when the user refocuses the window or reconnects to the network.

Setting Up SWR

1. Installation: First, you need to install the swr package.

   npm install swr


2. Basic Example of Using SWR for Data Fetching

   Here’s how you can use SWR to fetch data from an API and manage the loading, error, and success states:

   import React from 'react';
   import useSWR from 'swr';
   
   // A simple fetcher function that returns the response data
   const fetcher = (url) => fetch(url).then((res) => res.json());
   
   function App() {
   // Use SWR hook for fetching data
   const { data, error } = useSWR('https://api.example.com/data', fetcher);
   
   if (error) return <div>Error: {error.message}</div>;
   if (!data) return <div>Loading...</div>;
   
   return (
   <div>
   <h1>Data:</h1>
   <pre>{JSON.stringify(data, null, 2)}</pre>
   </div>
   );
   }
   export default App;

How It Works:

• useSWR: The useSWR hook is used to fetch data. It takes a unique key (URL or identifier) and a fetcher function.
• Fetcher Function: A fetcher function is responsible for fetching data from the network or other sources. It is typically a wrapper around fetch, but you can use any other method (e.g., Axios, GraphQL, etc.).
• Data, Error Handling: The hook returns data, error, and other states like isLoading. You can handle loading, success, and error states easily.

Key Features of SWR:

1. Auto Caching: SWR caches the data to prevent unnecessary requests, improving performance.

   const { data } = useSWR('https://api.example.com/data', fetcher);


2. Revalidation:

   • Automatic revalidation occurs by default when the component re-renders, or when the window is refocused, or when the network reconnects.
   • Polling: You can set up polling to re-fetch data at specified intervals.
   const { data } = useSWR('https://api.example.com/data', fetcher, { refreshInterval: 5000 });
// Re-fetches data every 5 seconds


3. Error Handling: SWR provides built-in error handling. If the request fails, it will return an error object.

   const { data, error } = useSWR('https://api.example.com/data', fetcher);

   if (error) return <div>Error: {error.message}</div>;

4. Conditional Fetching: You can conditionally fetch data based on certain conditions (e.g., if the URL or parameters are available).

   const shouldFetch = someCondition; // Define a condition
const { data } = useSWR(shouldFetch ? 'https://api.example.com/data' : null, fetcher);


5. Pagination Support: SWR supports pagination through query parameters. You can modify the URL dynamically based on page number and other variables.

   const { data, error } = useSWR(`https://api.example.com/data?page=${page}`, fetcher);


6. Re-fetching on Focus / Reconnect: By default, SWR re-fetches the data when the user refocuses the browser window or when the network reconnects. This is useful for keeping data up-to-date without manual intervention.

7. Mutate: You can mutate or update the cached data without re-fetching from the server. This is useful for optimistic updates (e.g., updating the UI immediately after a successful mutation without waiting for the network request).

   import { mutate } from 'swr';
   
   const handleSubmit = async () => {
   await fetch('/api/update', { method: 'POST', body: JSON.stringify(data) });
   mutate('https://api.example.com/data'); // Re-fetch the data after mutation
   };

Advanced Usage:

1. Using SWR with Axios or other libraries: SWR’s fetcher function can be replaced with other data-fetching libraries, such as Axios or GraphQL clients.

   Example with Axios:

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

   


2. Global Configuration: You can configure SWR globally, like setting default options, such as a base URL, revalidation options, etc.

   import { SWRConfig } from 'swr';
   
   function App() {
   return (
   <SWRConfig value={{ fetcher }}>
   <Component />
   </SWRConfig>
   );
   }
   

   Conclusion:

   SWR is a powerful tool for handling data fetching in React. It abstracts away much of the complexity of managing caching, revalidation, error handling, and performance optimizations, making it a great choice for developers who want a simple yet powerful way to manage asynchronous data in their apps. It’s especially helpful when building applications that require frequent data updates or need to display real-time information.