Use SWR for Automatic Deduplication

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

Incorrect (no deduplication, each instance fetches):

tsx

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

Correct (multiple instances share one request):

tsx

import useSWR from 'swr'

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

For immutable data:

tsx

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

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

For mutations:

tsx

import {useSWRMutation} from 'swr/mutation'

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

Reference: https://swr.vercel.app