사용자 정의 낚싯바늘을 만들어서usesWR의 성능을 해치지 않습니다

usesWR은 구성 요소가 사용하는 상태만 업데이트합니다.
https://swr.vercel.app/docs/advanced/performance#dependency-collection
usesWR을 사용하여 아래의 교환data과 isValidating의 사용자 정의 연결을 만들면 이 장점을 손상시킬 수 있습니다.

import useSWR, { SWRConfiguration } from 'swr'
import { get, post } from './fetcher'
import { User } from './types'

const useUser = (userId: string, option?: SWRConfiguration) => {
  const { mutate, ...other } = useSWR<User>(`/users/${userId}`, get, option)

  const update = (newUserValue: User) =>
    mutate(async prevUser => {
      post(`/users/${userId}`, newUserValue)
      return newUserValue
    }, false)
    
   return { mutate, ...other, update }
}

이러한 맞춤형 연결이라면 업데이트된 구성 요소만 사용해도 데이터가 업데이트되면 렌더링이 발생합니다.이 밖에other는 isValidating과 error도 포함하기 때문에 매번 이 값을 업데이트할 때마다 나타난다.(총 4회 정도)
이를 방지하려면 스프레드시트 구성을 사용하지 말고 Object를 직접 사용하십시오.assign으로 돌려주세요.

import useSWR, { SWRConfiguration } from 'swr'
import { get, post } from './fetcher'
import { User } from './types'

const useUser = (userId: string, option?: SWRConfiguration) => {
  const swrResponse = useSWR<User>(`/users/${userId}`, get, option)
  const { mutate } = swrResponse

  const update = (newUserValue: User) =>
    mutate(async prevUser => {
      post(`/users/${userId}`, newUserValue)
      return newUserValue
    }, false)
    
   return Object.assign(swrResponse, { update })
}

사실 업데이트도 적어두는 게 좋아요.