react-queryのrenderingの最適化

どのタイミングで再renderingされるか？

refetchして得た結果をdeep equealで比較して、異なっていた場合、再renderingする

なにを比較している？query? data?

useQuery()の返り値全てらしい

isFetchingとかerrorとか含め全部

Component側に表出していなくても全て

notifyOnChangePropsで防止できる

select

notifyOnChangeProps

defaultでは、useQueryのreturnsのいずれか1つでも変更があれば再renderingされる

例えば、backgroundでrefetchが起きるたびに、isFetchingがtrue→false→trueと変わるので、2回renderingが走る

dataに何も変更がなかったとしても

notifyOnChangeProps: string[] | "tracked"

string[]となっているが、実際はuseQueryのreturnsのkeysになる

e.g. 'data', 'error', 'isFetching'..

ここで指定したものの値に変更があった場合にのみ再renderingする

"tracked"を指定した場合は、参照しているもののいずれかに変更があった場合にのみ再renderingする

例えば、この場合↓ ['data', 'isFetching']と指定した時と同じになる

code:ts

const { data, isFetching } = useQuery(key, fn, {

notifyOnChangeProps: 'tracked'

})

notifyOnChangePropsExclusions: string[]

notifyOnChangePropsの逆のようなもの

指定したものに変更があっても再renderingさせない