😽

SWRのcompareオプションでキャッシュによる無駄な再描画を防ぐ

2022/11/23に公開約1,000字

やること

SWRでデータフェッチを行う際、キャッシュの取り扱いに悩む場面があります。
optionのcompareを使うとデータフェッチした値がキャッシュ値と異なるときのみ、データが更新されるような設定が可能です。

使い方

optionのcompare関数でfalseを返す場合のみdataが渡されます。
これを使って、前回取得値(cache)と今回取得値(new)が異なる場合のみdataが更新され、ChildComponentが再描画されます。

import _ from "lodash";

const useData = () => {
  const { data, error } = useSWR(
    `/key`,
    fetcher,
    {
      compare: (cache, fetchedData) => {
        return _.isEqual(cache, fetchedData);
      }
    }
  );
  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 (
    <>
      ...
    </>
  )
}

参考

https://swr.vercel.app/docs/options
https://zenn.dev/uttk/articles/b3bcbedbc1fd00#オプションについて

Discussion

ログインするとコメントできます