React でデータをキャッシュすると、同じデータを複数回フェッチする必要性が減り、パフォーマンスとユーザー エクスペリエンスが大幅に向上します。 React でデータ キャッシュを実装するためのいくつかのアプローチを次に示します:

1. 状態管理ライブラリの使用

• Redux: Redux を使用してデータを一元化されたストアに保存します。 Redux 状態で API 応答をキャッシュし、データがまだ利用できない場合にのみデータをフェッチできます。
• React Query: このライブラリは、サーバー状態の組み込みキャッシュ メカニズムを提供します。 API 応答を自動的にキャッシュし、必要に応じて再フェッチします。
• Recoil: Redux と同様に、Recoil を使用するとグローバル状態を管理でき、セレクターを使用してキャッシュ戦略を実装できます。

2. ローカル ストレージまたはセッション ストレージ

ブラウザのローカル ストレージまたはセッション ストレージにデータをキャッシュできます:

const fetchData = async () => {
    const cachedData = localStorage.getItem('myData');
    if (cachedData) {
        return JSON.parse(cachedData);
    }

    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    localStorage.setItem('myData', JSON.stringify(data));
    return data;
};

// Use it in your component
useEffect(() => {
    const loadData = async () => {
        const data = await fetchData();
        setData(data);
    };
    loadData();
}, []);

3. カスタム キャッシュ ロジック

JavaScript オブジェクトを使用して独自のキャッシュ メカニズムを実装し、一意のキーに基づいてデータを保存できます。

const cache = {};

const fetchData = async (key) => {
    if (cache[key]) {
        return cache[key];
    }

    const response = await fetch(`https://api.example.com/data/${key}`);
    const data = await response.json();
    cache[key] = data; // Cache the data
    return data;
};

// Use it in your component
useEffect(() => {
    const loadData = async () => {
        const data = await fetchData('myKey');
        setData(data);
    };
    loadData();
}, []);

4. サービスワーカー

より高度なキャッシュを行うには、Service Worker を使用して API 応答をキャッシュし、キャッシュから直接提供できます。

5. useMemo または useCallback によるメモ化

フェッチされたデータから派生した計算データを扱っている場合は、useMemo を使用して値をメモ化します:

const memoizedValue = useMemo(() => computeExpensiveValue(data), [data]);

結論

データの鮮度、複雑さ、ユーザー エクスペリエンスなどの要素を考慮して、アプリケーションのニーズに最適なキャッシュ戦略を選択してください。 React Query のようなライブラリはキャッシュとデータのフェッチを簡素化できますが、手動の方法ではより詳細な制御が可能です。