npm install swr

import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((res) => res.json());

function UserProfile({ userId }: { userId: string }) {
  const { data, error, isLoading } = useSWR(`/api/users/${userId}`, fetcher);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Failed to load user.</p>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}

// _app.tsx or layout.tsx
import { SWRConfig } from "swr";

export default function App({ children }) {
  return (
    <SWRConfig
      value={{
        fetcher: (url) => fetch(url).then((res) => res.json()),
        revalidateOnFocus: true,
      }}
    >
      {children}
    </SWRConfig>
  );
}

// Now in any component — no need to pass a fetcher
function Dashboard() {
  const { data } = useSWR("/api/dashboard");
  return <div>{data?.title}</div>;
}

import useSWR, { useSWRConfig } from "swr";

function LikeButton({ postId }: { postId: string }) {
  const { data } = useSWR(`/api/posts/${postId}`);
  const { mutate } = useSWRConfig();

  async function handleLike() {
    // Optimistically update the UI before the API call resolves
    mutate(
      `/api/posts/${postId}`,
      { ...data, likes: data.likes + 1 },
      false // don't revalidate yet
    );
    await fetch(`/api/posts/${postId}/like`, { method: "POST" });
    mutate(`/api/posts/${postId}`); // revalidate after
  }

  return <button onClick={handleLike}>Like ({data?.likes})</button>;
}