skillhub-088-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

使用 SWR 实现自动去重

SWR 可以在组件实例之间实现请求去重、缓存和重新验证。

错误写法（无去重，每个实例各自发起请求）：

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

正确写法（多个实例共享一个请求）：

import useSWR from 'swr'

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

对于不可变数据：

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

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

对于数据变更：

import { useSWRMutation } from 'swr/mutation'

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

参考链接：https://swr.vercel.app