---
type: reference
---

## Use SWR for Automatic Deduplication

SWR offers 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
[source: skills/react-best-practices/rules/client-swr-dedup.md]