Supercharge Your React App with ‘swr’: A Beginner’s Guide

Written by

learnmodernjavascript

in

In the dynamic world of React development, efficiently managing data fetching and caching is crucial for building performant and user-friendly applications. One of the most common challenges developers face is handling asynchronous operations, such as fetching data from APIs, and ensuring that the user interface stays responsive and up-to-date. This is where a powerful data fetching library like ‘swr’ (stale-while-revalidate) comes into play. Swr simplifies data fetching, caching, and revalidation, allowing you to focus on building great user experiences rather than wrestling with complex data management logic.

What is ‘swr’?

‘swr’ is a lightweight React Hooks library for remote data fetching. It provides a simple and elegant way to fetch data from APIs, cache it, and automatically revalidate it in the background. This approach significantly improves performance by displaying cached data immediately while updating it in the background. This “stale-while-revalidate” strategy ensures a smooth user experience, as users always see some data, and the latest data is fetched and updated in the background.

Key features of ‘swr’ include:

  • Simple API: Easy-to-use hooks for fetching data.
  • Caching: Automatic caching of fetched data.
  • Revalidation: Automatic revalidation on focus, reconnect, and interval.
  • Debouncing and Throttling: Built-in support to prevent excessive requests.
  • Optimistic Updates: Ability to update the UI optimistically before data arrives.
  • TypeScript Support: Full TypeScript support for type safety.

Why Use ‘swr’?

Using ‘swr’ offers several benefits:

  • Improved Performance: By using a stale-while-revalidate strategy, ‘swr’ ensures that users always see data quickly, even if the data is being updated in the background.
  • Simplified Code: ‘swr’ simplifies data fetching logic, reducing boilerplate code and making your components cleaner and more readable.
  • Automatic Caching: ‘swr’ automatically caches data, reducing the number of requests to your API and improving the overall performance of your application.
  • Efficient Data Updates: ‘swr’ handles revalidation automatically, ensuring that your data is always up-to-date.
  • Easy Integration: ‘swr’ integrates seamlessly with React and other libraries, making it easy to add to your existing projects.

Getting Started with ‘swr’

Let’s dive into a practical example to see how easy it is to use ‘swr’ in your React application. First, you need to install the library:

npm install swr

Now, let’s create a simple component that fetches and displays data from a hypothetical API endpoint. We’ll use the useSWR hook provided by ‘swr’.

import useSWR from 'swr';

function MyComponent() {
  // Define the fetcher function
  const fetcher = (url) => fetch(url).then(res => res.json());

  // Use the useSWR hook
  const { data, error, isLoading } = useSWR('/api/data', fetcher);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;
  if (!data) return null;

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

export default MyComponent;

Let’s break down this code:

  • Import useSWR: We import the useSWR hook from the ‘swr’ library.
  • Define the fetcher function: The fetcher function takes a URL as an argument and fetches the data using the fetch API. It then parses the response as JSON. This function is crucial, as it’s the core of data fetching.
  • Use the useSWR hook: We call the useSWR hook, passing the API endpoint ('/api/data') and the fetcher function. The hook returns three values:
    • data: The fetched data, or undefined if the data is still loading.
    • error: An error object if the fetch failed.
    • isLoading: A boolean indicating if the data is currently being fetched.
  • Conditional Rendering: We use conditional rendering to display different content based on the state of the data fetching.
    • If isLoading is true, we display a loading message.
    • If error is present, we display an error message.
    • If there is no data, we return null (this is optional).
    • Otherwise, we display the fetched data.

Understanding the ‘useSWR’ Hook

The useSWR hook is the heart of ‘swr’. It handles the entire data fetching lifecycle, including caching, revalidation, and error handling. Let’s delve deeper into its parameters and behavior.

The useSWR hook takes two main arguments:

  1. Key: A unique string key that identifies the data being fetched. This key is used for caching and revalidation. Typically, it is the API endpoint URL.
  2. Fetcher Function: A function that fetches the data. This function takes the key as an argument and returns a Promise that resolves to the data.

The useSWR hook returns an object with the following properties:

  • data: The fetched data. Initially, it will be undefined while the data is loading.
  • error: An error object if the fetch failed.
  • isLoading: A boolean indicating if the data is currently being fetched.
  • isValidating: A boolean indicating if the data is currently being revalidated.
  • mutate: A function to manually trigger a revalidation.
  • revalidate: A function to manually revalidate the data.
  • size: The number of times the data has been fetched.

Advanced Usage and Features

‘swr’ offers several advanced features to handle more complex scenarios:

1. Custom Configuration

You can customize the behavior of useSWR by passing a configuration object as the third argument. This object allows you to control aspects like:

  • revalidateOnFocus: Whether to revalidate the data when the window or tab gains focus (default: true).
  • revalidateOnReconnect: Whether to revalidate the data when the network connection is restored (default: true).
  • refreshInterval: The interval (in milliseconds) to automatically revalidate the data (default: 0, meaning no automatic revalidation).
  • fetcher: You can also pass the fetcher function here instead of in the hook. This can be useful if you need to share the same fetcher function across multiple useSWR calls.
  • onErrorRetry: A function to handle errors and retry fetching data.

Here’s an example of using custom configuration:

import useSWR from 'swr';

function MyComponent() {
  const fetcher = (url) => fetch(url).then(res => res.json());

  const { data, error, isLoading } = useSWR('/api/data', fetcher, {
    revalidateOnFocus: false,
    refreshInterval: 5000,
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;
  if (!data) return null;

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

export default MyComponent;

In this example, we disable revalidation on focus and set a refresh interval of 5 seconds.

2. Mutations

‘swr’ provides a mutate function that allows you to manually trigger a revalidation or update the cache. This is useful when you need to update data after a mutation (e.g., a POST, PUT, or DELETE request).

Here’s an example of how to use mutate:

import useSWR, { mutate } from 'swr';

function MyComponent() {
  const fetcher = (url) => fetch(url).then(res => res.json());
  const { data, error, isLoading } = useSWR('/api/data', fetcher);

  const handleUpdate = async () => {
    // Make a request to update the data
    await fetch('/api/update', { method: 'POST' });

    // Manually trigger a revalidation
    mutate('/api/data');
  };

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;
  if (!data) return null;

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

export default MyComponent;

In this example, when the “Update Data” button is clicked, we make a POST request to update the data on the server. After the update, we call mutate('/api/data') to revalidate the data and update the UI with the new data.

3. Optimistic Updates

‘swr’ also supports optimistic updates, which allow you to update the UI immediately after a mutation, even before the server responds. This can significantly improve the perceived performance of your application.

Here’s an example of how to implement optimistic updates:

import useSWR, { mutate } from 'swr';

function MyComponent() {
  const fetcher = (url) => fetch(url).then(res => res.json());
  const { data, error, isLoading } = useSWR('/api/data', fetcher);

  const handleAddItem = async (newItem) => {
    // Optimistically update the data
    mutate(
      '/api/data',
      (currentData) => {
        if (!currentData) return [newItem]; // handle the initial case
        return [...currentData, newItem];
      },
      false // Don't revalidate immediately
    );

    // Make a request to add the item
    try {
      await fetch('/api/add', { method: 'POST', body: JSON.stringify(newItem) });
    } catch (err) {
      // If the request fails, revert the optimistic update
      mutate('/api/data'); // Revalidate to revert to the previous state
    }
  };

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;
  if (!data) return null;

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button> handleAddItem({ id: Date.now(), name: 'New Item' })}>Add Item</button>
    </div>
  );
}

export default MyComponent;

In this example, when the “Add Item” button is clicked, we first optimistically add the new item to the UI using the mutate function. We pass a function to mutate that updates the cache with the new data. The third argument, false, tells ‘swr’ not to revalidate immediately. After the optimistic update, we make a POST request to add the item to the server. If the request fails, we call mutate again to revalidate the data and revert to the previous state.

4. Error Handling and Retries

‘swr’ provides several mechanisms for handling errors and retrying failed requests. You can use the onErrorRetry option in the configuration object to customize error handling.

import useSWR from 'swr';

function MyComponent() {
  const fetcher = (url) => fetch(url).then(res => res.json());

  const { data, error, isLoading } = useSWR('/api/data', fetcher, {
    onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
      // Retry after 5 seconds if the error is a network error
      if (error.status === 404) return;
      if (retryCount >= 10) return;
      setTimeout(() => revalidate({ retryCount: retryCount + 1 }), 5000);
    },
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;
  if (!data) return null;

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

export default MyComponent;

In this example, we use the onErrorRetry option to retry the request after 5 seconds if a network error occurs. We also limit the number of retries to 10.

Common Mistakes and How to Avoid Them

While ‘swr’ simplifies data fetching, it’s essential to be aware of common pitfalls and how to avoid them:

  • Incorrect Key: Make sure the key you pass to useSWR is unique and accurately represents the data you’re fetching. Using the wrong key can lead to caching issues and incorrect data being displayed.
  • Missing or Incorrect Fetcher Function: The fetcher function is crucial for fetching the data. Ensure it correctly fetches and parses the data from the API. Common mistakes include not handling errors in the fetcher function or not parsing the response correctly.
  • Not Handling Loading and Error States: Always handle the isLoading and error states to provide a good user experience. Displaying a loading indicator while the data is being fetched and an error message if the fetch fails is essential.
  • Over-Fetching: Be mindful of how often you are fetching data. Use the revalidateOnFocus, revalidateOnReconnect, and refreshInterval options to control when and how often the data is revalidated. Avoid excessive API calls.
  • Incorrectly Using Mutate: When using mutate, ensure you understand how it updates the cache. Make sure your cache updates are consistent with the server-side data.

Step-by-Step Instructions for Implementing ‘swr’

Let’s walk through a step-by-step example of implementing ‘swr’ in a simple React application that fetches a list of posts from a hypothetical API.

Step 1: Set up your React project

If you don’t already have one, create a new React project using Create React App or your preferred setup:

npx create-react-app swr-example

Navigate to your project directory:

cd swr-example

Step 2: Install ‘swr’

Install the ‘swr’ library using npm or yarn:

npm install swr

Step 3: Create a Post Component

Create a new component called PostList.js to display the list of posts:

import React from 'react';

function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

export default PostList;

Step 4: Implement Data Fetching with ‘swr’

Modify your App.js file to fetch the posts using ‘swr’:

import React from 'react';
import useSWR from 'swr';
import PostList from './PostList';

function App() {
  // Define the fetcher function
  const fetcher = (url) => fetch(url).then(res => res.json());

  // Use the useSWR hook
  const { data, error, isLoading } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load posts</div>;
  if (!data) return null;

  return (
    <div>
      <h1>Posts</h1>
      
    </div>
  );
}

export default App;

In this example, we fetch data from a public API (https://jsonplaceholder.typicode.com/posts). We display a loading message while the data is being fetched and an error message if the fetch fails. Once the data is available, we pass it to the PostList component to display the posts.

Step 5: Run the Application

Start your React application:

npm start

You should see a list of posts fetched from the API and displayed in your application.

Key Takeaways

  • ‘swr’ is a lightweight and powerful library for data fetching in React.
  • It simplifies data fetching, caching, and revalidation.
  • ‘swr’ uses the stale-while-revalidate strategy for improved performance.
  • The useSWR hook is the core of ‘swr’.
  • You can customize ‘swr’ with configuration options for advanced scenarios.
  • Use mutate for manual revalidation and cache updates.
  • Implement optimistic updates for improved user experience.

FAQ

Here are some frequently asked questions about ‘swr’:

  1. What is the difference between ‘swr’ and other data fetching libraries like ‘react-query’?

    Both ‘swr’ and ‘react-query’ are excellent data fetching libraries for React. ‘react-query’ is generally considered more feature-rich and suitable for complex applications with extensive data management needs. ‘swr’ is simpler and more lightweight, making it a great choice for smaller to medium-sized projects or when you want a straightforward solution. The primary difference lies in the scope and complexity of features.

  2. How does ‘swr’ handle caching?

    ‘swr’ automatically caches data based on the key you provide to the useSWR hook. When you fetch data, it stores the data in a cache. Subsequent calls to the same key will first return the cached data (stale) and then revalidate the data in the background (revalidate). This ensures that the user always sees some data and the latest data is fetched in the background.

  3. Can I use ‘swr’ with other state management libraries like Redux?

    Yes, you can certainly use ‘swr’ with other state management libraries like Redux or Zustand. ‘swr’ primarily handles data fetching and caching, while these other libraries manage the application’s overall state. You can use ‘swr’ to fetch data and then store the data in your state management library for use throughout your application.

  4. How do I handle authentication with ‘swr’?

    You can handle authentication with ‘swr’ by including authentication tokens in your fetcher function’s headers. For example, you can use the fetch API or a library like Axios to include an authorization header. You’ll also want to consider how to handle token expiration and refresh tokens, which might involve using ‘swr’s mutate function to update the cache when the token changes.

  5. Is ‘swr’ suitable for server-side rendering (SSR)?

    Yes, ‘swr’ can be used with server-side rendering (SSR). You’ll typically need to use a different approach for the initial data fetch on the server (e.g., using the fetch API directly on the server). Then, ‘swr’ can take over on the client-side to handle caching and revalidation. Be mindful of potential issues with hydration and ensure that the server-side and client-side data are consistent.

By leveraging the power of ‘swr’, you can streamline your data fetching processes, enhance your application’s performance, and create a more responsive user experience. Its simplicity and flexibility make it an excellent choice for React developers of all levels, helping you build more efficient and user-friendly web applications. As you work with ‘swr’, remember to pay close attention to the key concepts of caching, revalidation, and error handling to maximize its benefits and build robust, high-performing React applications.

More posts