React でのデータのキャッシュ: パフォーマンスとユーザー エクスペリエンスの向上

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

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

• Redux: Redux を使用してデータを一元化されたストアに保存します。 API 応答を Redux 状態でキャッシュし、データがまだ利用できない場合にのみデータをフェッチできます。
• 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 のようなライブラリを使用すると、キャッシュとデータのフェッチを簡素化できますが、手動の方法ではより詳細な制御が可能です。

以上がReact でのデータのキャッシュ: パフォーマンスとユーザー エクスペリエンスの向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。