Claude Code Guide（zebbern）

Use SWR for Automatic Deduplication

SWR enables request deduplication, caching, and revalidation across component instances.

Incorrect (no deduplication, each instance fetches):

function UserList() {
  const [users, setUsers] = useState([])
  useEffect(() => {
    fetch("/api/users")
      .then((r) => r.json())
      .then(setUsers)
  }, [])
}

Correct (multiple instances share one request):

import useSWR from "swr"

function UserList() {
  const { data: users } = useSWR("/api/users", fetcher)
}

For immutable data:

import { useImmutableSWR } from "@/lib/swr"

function StaticContent() {
  const { data } = useImmutableSWR("/api/config", fetcher)
}

For mutations:

import { useSWRMutation } from "swr/mutation"

function UpdateButton() {
  const { trigger } = useSWRMutation("/api/user", updateUser)
  return <button onClick={() => trigger()}>Update</button>
}

Reference: https://swr.vercel.app