Gitroom ソース コードで useCallback を使用して useSWR でフェッチャーをキャッシュする方法を見つけました。

上の画像は、platform-analytics/render.analytics.tsx からのものです。このコード スニペットを理解してみましょう。

useCallback フックを useSWR と組み合わせて使用​​して、React アプリケーションでのデータ取得を最適化する方法を検討します。提供されたコード スニペットを詳細に分析し、フェッチャー関数のキャッシュが重要である理由を説明します。

コードを理解する

コードをステップバイステップで見てみましょう:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

ここでは、useCallback フック内で非同期関数ロードを定義しています。この関数は、指定されたエンドポイントからデータをフェッチし、読み込み状態を処理します。 useCallback フックにより、この関数がメモ化され、依存関係 (統合と日付) が変更された場合にのみ再作成されることが保証されます。

次に、useSWR を使用してデータの取得を管理します。

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

ここで、useSWR はキー (/analytics-${integration?.id}-${date}) とメモ化されたロード関数で構成されています。構成オプションは、データの再検証動作を制御します。

useCallback が不必要な再フェッチを防ぐ方法

useCallback が不要な再フェッチをどのように防ぐかを理解するには、React が関数参照を処理する方法と useSWR がどのように機能するかを詳しく調べる必要があります。

React での関数参照

React では、コンポーネントが再レンダリングされるたびに、コンポーネント内で定義されているすべての関数が再作成されます。これは、useCallback を使用しないと、レンダリングのたびにロード関数の新しいインスタンスが作成されることを意味します。

useSWRへの影響

useSWR は React 用のデータ取得ライブラリです。キーを使用してデータを識別し、フェッチャー関数を使用してデータをフェッチします。 useSWR は、フェッチャー関数参照の安定性に依存します。参照が変更されると、フェッチャーの実際のロジックが変更されていない場合でも、useSWR はこれをデータを再フェッチする必要があるという信号として解釈する可能性があります。

詳細な説明は次のとおりです:

1. なしコールバックを使用:

const load = async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
};

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

この場合、レンダリングごとに新しいロード関数が作成されます。 useSWR は毎回異なる関数参照を参照するため、統合と日付が変更されていない場合でも、不必要な再フェッチが発生する可能性があります。

with useCallback:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

load 関数を useCallback でラップすることにより、依存関係 (統合と日付) が変更された場合にのみロード関数が再作成されるようになります。関数参照のこの安定性により、統合または日付が変更されない限りフェッチャー関数が変更されていないことが useSWR に通知され、不必要な再フェッチが防止されます。

shadcn-ui/ui を最初から構築する方法を学びたいですか?チェックアウト スクラッチから構築

https://github.com/gitroomhq/gitroom/blob/c03b96215fa30b267a97d7eafc2281f482a3192f/apps/frontend/src/components/platform-analytics/render.analytics.tsx#L25
https://github.com/search?q=repo:gitroomhq/gitroom useSWR&type=code
https://swr.vercel.app/docs/getting-started
https://react.dev/reference/react/useCallback