Swr:
Stale-While-Revalidate is a popular strategy that first returns the data from stale(cache), then send the fetch request (revalidate), and finally come with the up-to-date data.

Why swr?
Instant Loading (Faster User Experience)
Background Revalidation of the data
Improves Offline/Slow Network Experience

We have two most common hooks from SWR data-fetching library to implement swr in our React/Next application -
1. useSWR - with useSWR we can easily fetch data from an API or any source. The hook automatically handles everything like caching, revalidation, error handling, and cache data updates. For example, it revalidates the data when component mounts, when the user refocuses the browser tab, reconnects to the internet, or on custom revalidation interval.

import useSWR from 'swr';

// Fetcher function
const fetcher = (url) => fetch(url).then((res) => res.json());

function MyComponent() {
  const { data, error, isLoading } = useSWR('', fetcher);

  if (error) return <div>Error loading data</div>;
  if (isLoading) return <div>Loading...</div>;

  return <div>{JSON.stringify(data)}</div>;
}

2. useSWRMutation - It complements useSWR by providing a way to modify data, such as performing create, update, or delete operations. While useSWR is designed for reading data and displaying it in your app, useSWRMutation focuses on mutating or updating that data on the server side.

import useSWRMutation from 'swr/mutation';

// Function to update data
const updateData = (url, { arg }) =>
  fetch(url, {
    method: 'PUT',
    body: JSON.stringify(arg),
    headers: { 'Content-Type': 'application/json' },
  });

function MyMutationComponent() {
  const { trigger, isMutating } = useSWRMutation('', updateData);

  const handleUpdate = async () => {
    await trigger({ id: 1, name: 'New Name' });
  };

  return (
    <div>
      <button onClick={handleUpdate} disabled={isMutating}>
        Update Item
      </button>
      {isMutating && <span>Updating...</span>}
    </div>
  );
}

#swr #hook #react #next