Unlock the Power of SWR: A Revolutionary Hooks Library for Remote Data Fetching

What is SWR?

SWR is a cutting-edge hooks library designed to simplify remote data fetching in React applications. The name “SWR” stands for stale-while-revalidate, an HTTP cache invalidation strategy that ensures your app serves fresh data while revalidating cached data in the background.

The Magic of SWR

With SWR, your application components receive a constant stream of fresh data, making your UI blazing fast, reactive, and responsive. Additionally, SWR’s deduplication feature eliminates redundant data, reducing unnecessary network requests and improving overall performance.

New Features in SWR v1

Smaller Size and Improved Performance

SWR v1 boasts a significantly smaller library size, thanks to tree shaking and path imports. This results in a leaner runtime, smaller bundle size, and a more efficient node_modules directory.

import { useSWR } from 'wr';

function MyComponent() {
  const { data, error } = useSWR('/api/data');
  //...
}

Custom Cache Provider

Version 1 introduces a provider API, allowing you to customize your cache provider and adapt SWR to support various storage options. You can also extend the cache provider to sync with local storage, reset the cache between test cases, and more.

import { SWRConfig } from 'wr';

function MyCacheProvider({ children }) {
  return (
    <SWRConfig value={{ provider: () => new Map() }}>
      {children}
    </SWRConfig>
  );
}

useSWRConfig()

This new hook enables you to access global configuration options for all SWR hooks within a React component. You can also use it to access the current cache provider.

import { useSWRConfig } from 'wr';

function MyComponent() {
  const { cache } = useSWRConfig();
  //...
}

Immutable Mode

SWR v1 provides automatic revalidation on focus, interval, and reconnect events. You can also use the useSWRImmutable hook to make state immutable, ensuring that the state doesn’t change when revalidating.

import { useSWRImmutable } from 'wr';

function MyComponent() {
  const { data, error } = useSWRImmutable('/api/data');
  //...
}

Middleware

The SWR middleware API allows you to abstract and reuse logic, executing code before and after invoking the useSWR hooks. This feature is perfect for implementing request loggers, authentication, and more.

import { middleware } from 'wr';

const loggerMiddleware = (useSWRNext) => {
  return (key, fetcher) => {
    console.log(`Fetching ${key}`);
    return useSWRNext(key, fetcher);
  };
};

middleware.use(loggerMiddleware);

function MyComponent() {
  const { data, error } = useSWR('/api/data');
  //...
}

Fallback Data

Provide arbitrary prefetched data for all SWR hooks with specific keys, displaying placeholder content on your page while your application revalidates. This improves the user experience, especially in scenarios like static site generation (SSG) and server-side rendering (SSR).

import { useSWR } from 'wr';

function MyComponent() {
  const { data, error } = useSWR('/api/data', fetcher, {
    fallbackData: [...], // Prefetched data
  });
  //...
}

Experience the power of SWR v1 and explore the changelog to unlock the full potential of SWR. Learn more.