😽
SWRのcompareオプションでキャッシュによる無駄な再描画を防ぐ
やること
SWRでデータフェッチを行う際、キャッシュの取り扱いに悩む場面があります。
optionのcompareを使うとデータフェッチした値がキャッシュ値と異なるときのみ、データが更新されるような設定が可能です。
使い方
optionのcompare関数でfalseを返す場合のみdataが渡されます。
これを使って、前回取得値(cache)と今回取得値(new)が異なる場合のみdataが更新され、ChildComponentが再描画されます。
import _ from "lodash";
const useData = () => {
const { data, error } = useSWR(
`/key`,
fetcher,
{
compare: (cache, new) => {
return _.isEqual(cache, new);
}
}
);
return {
data,
error
};
};
const ParentComponent: React.FC<{}> = () => {
const { data } = useData()
// cacheとfetchedDataが異なる場合のみ、dataが更新される
if (!data) return null;
return (
<ChildComponent data={data} />
)
}
const ChildComponent: React.FC<Data> = ({ data }) => {
// cacheとfetchedDataが異なる場合のみ、再描画される
...
return (
<>
...
</>
)
}
参考
Discussion