Files
5chan/.codex/skills/vercel-react-best-practices/rules/client-swr-dedup.md
T
Tommaso CasaburiandGitHub a92b185a66 chore(ai-workflow): track repo-managed review tooling (#1046)
* chore(ai-workflow): track repo-managed review tooling

* fix(ai-workflow): remove repo-specific path assumptions

Make shared workflow hooks and APK testing guidance resolve paths from the repo and contributor environment so the tooling works for all contributors, not just one machine.
2026-03-10 15:49:15 +08:00

1.1 KiB

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