nextjs-elysia-allaos/.agents/skills/vercel-react-best-practices/rules/client-swr-dedup.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use SWR for Automatic Deduplication	MEDIUM-HIGH	automatic deduplication	client, swr, deduplication, data-fetching

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