Reactでリモートデータをローカルストレージに保存し再利用する方法を徹底解説

Reactを利用したアプリケーション開発では、データの管理が重要な課題の一つです。特に、リモートAPIから取得したデータを効率よく扱うことが求められます。その中でも、ローカルストレージを活用してデータを保存し再利用する方法は、アプリケーションのパフォーマンス向上やオフライン対応の観点から非常に有用です。本記事では、Reactを使ってリモートデータをローカルストレージに保存し、必要に応じて再利用するための実装方法を、具体例を交えながらわかりやすく解説します。

リモートデータの取得方法

Reactを使用してリモートAPIからデータを取得するには、fetchやaxiosといったHTTPリクエストライブラリを活用します。このセクションでは、基本的なAPIデータ取得の手順を解説します。

基本的なデータ取得

まず、fetchを使用してAPIからデータを取得する方法を見てみましょう。以下は、useEffectフックを使用してコンポーネントのマウント時にデータを取得する例です。

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

Axiosを使用したデータ取得

axiosはfetchよりも使いやすいインターフェースを提供します。以下は、同様の処理をaxiosで行う例です。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => setData(response.data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

ポイント

必ずエラーハンドリングを実装し、通信失敗時の対策を講じましょう。
非同期処理を扱う際には、async/awaitを使用するとコードが読みやすくなります。
APIのベースURLが複数箇所で使われる場合は、axiosインスタンスや設定ファイルで管理するのがおすすめです。

次のセクションでは、取得したデータを効率よく保存するためのローカルストレージの基礎について説明します。

ローカルストレージの基礎知識

ローカルストレージは、ブラウザにデータを保存するための仕組みの一つで、JavaScriptを使って簡単に操作できます。このセクションでは、ローカルストレージの基本概念と使用方法について説明します。

ローカルストレージとは

ローカルストレージは、Webブラウザにデータを保存するためのストレージAPIです。主な特徴は以下の通りです：

容量制限：通常は約5MBまで保存可能（ブラウザに依存）。
データの永続性：ブラウザを閉じてもデータが保持される。
同期性：非同期ではなく、同期的に操作される。

基本的な操作方法

ローカルストレージを操作するには、localStorageオブジェクトを使用します。以下は基本的なメソッドです。

データの保存

setItemメソッドを使用します。キーと値は文字列として保存されます。

localStorage.setItem('key', 'value');

データの取得

getItemメソッドを使用して保存されたデータを取得します。

const value = localStorage.getItem('key');
console.log(value); // 'value'

データの削除

特定のキーを削除するにはremoveItem、すべてのデータを削除するにはclearを使用します。

localStorage.removeItem('key'); // 特定のキーを削除
localStorage.clear(); // 全データを削除

JSON形式でのデータ保存

ローカルストレージは文字列しか保存できないため、オブジェクトや配列を保存する際はJSON.stringifyを使用します。

const data = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(data));

取得時はJSON.parseを使用してオブジェクトに変換します。

const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.name); // 'Alice'

注意点

セキュリティ：保存されたデータは容易にアクセス可能であり、機密情報には適しません。
容量：保存容量に制限があるため、大量のデータには向きません。

次のセクションでは、ローカルストレージにリモートデータを保存し、再利用する方法について具体的に解説します。

データ保存と取得の実装

ここでは、リモートデータをローカルストレージに保存し、後から再利用するための具体的な実装方法を紹介します。Reactを活用した実践的な例を交えながら解説します。

リモートデータをローカルストレージに保存する

以下は、リモートAPIから取得したデータをローカルストレージに保存するコード例です。

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // ローカルストレージにデータがあれば取得
    const localData = localStorage.getItem('remoteData');
    if (localData) {
      setData(JSON.parse(localData));
      setLoading(false);
    } else {
      // データがない場合はリモートAPIから取得
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(fetchedData => {
          setData(fetchedData);
          localStorage.setItem('remoteData', JSON.stringify(fetchedData)); // ローカルストレージに保存
          setLoading(false);
        })
        .catch(error => console.error('Error fetching data:', error));
    }
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

保存したデータを再利用する

ローカルストレージからデータを取得するだけの場合、以下のように簡単なコードで実現できます。

const savedData = JSON.parse(localStorage.getItem('remoteData'));
if (savedData) {
  console.log('Saved data:', savedData);
} else {
  console.log('No data found in localStorage.');
}

データ更新の実装

APIデータが変更されている可能性がある場合、タイムスタンプやバージョン番号を利用してデータの新鮮さを確認するロジックを追加できます。

useEffect(() => {
  const localData = localStorage.getItem('remoteData');
  const lastFetched = localStorage.getItem('lastFetched');
  const now = new Date().getTime();

  if (localData && lastFetched && now - lastFetched < 3600000) { // 1時間以内なら再利用
    setData(JSON.parse(localData));
    setLoading(false);
  } else {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(fetchedData => {
        setData(fetchedData);
        localStorage.setItem('remoteData', JSON.stringify(fetchedData));
        localStorage.setItem('lastFetched', now); // 最終取得時刻を保存
        setLoading(false);
      })
      .catch(error => console.error('Error fetching data:', error));
  }
}, []);

ポイント

エラーハンドリング：通信失敗時やデータ形式が期待と異なる場合に備える。
データ更新頻度：必要以上にリモートAPIを呼び出さない設計が重要。
ストレージのクリア：古いデータが不要になった場合、適切に削除する。

次のセクションでは、ローカルストレージの限界と、データの同期性を保つための考慮事項について説明します。

データの永続性と同期の課題

ローカルストレージは便利ですが、完全なデータ管理ソリューションではありません。このセクションでは、ローカルストレージの限界と、それを補うための同期の工夫について解説します。

ローカルストレージの限界

容量制限

ローカルストレージには容量制限（通常約5MB）があり、大量のデータを保存する場合には不向きです。特に、画像や動画のような大容量データには別のストレージ手段（IndexedDBやクラウドストレージ）が必要です。

セキュリティの脆弱性

ローカルストレージは暗号化されておらず、ブラウザの開発者ツールを使えば容易にデータにアクセスできます。機密情報を保存するのには適していません。

同期性の欠如

ローカルストレージに保存されたデータは、複数のデバイス間で同期されません。そのため、同じユーザーが別のデバイスを使用する場合、データが一貫しない可能性があります。

データの有効期限

ローカルストレージにはデータの自動有効期限機能がないため、古くなったデータが保持され続ける可能性があります。

同期を保つための工夫

サーバーサイドとの同期

ローカルストレージのデータがサーバー側のデータと一致するように定期的に更新を行う仕組みが必要です。

function syncData() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(fetchedData => {
      localStorage.setItem('remoteData', JSON.stringify(fetchedData));
      console.log('Data synchronized with server.');
    })
    .catch(error => console.error('Error during synchronization:', error));
}

タイムスタンプを活用

ローカルストレージに保存する際に、データのタイムスタンプを一緒に保存し、古いデータを検出するロジックを導入します。

const now = new Date().getTime();
const lastFetched = localStorage.getItem('lastFetched');
if (lastFetched && now - lastFetched > 3600000) { // 1時間を超えていれば再取得
  console.log('Data is stale, fetching new data...');
  syncData();
}

セッションストレージとの併用

セッションストレージを利用して、ブラウザセッションごとにリフレッシュされる一時データを保存します。これにより、短期的なデータ管理が改善されます。

sessionStorage.setItem('temporaryData', JSON.stringify({ key: 'value' }));

ライブラリの利用

ローカルストレージの課題を解決するために、専用のライブラリを活用することもできます。以下は代表的なライブラリです：

localForage: IndexedDBやWebSQLなど、ローカルストレージの拡張的な利用をサポート。
Redux Persist: Reduxの状態をローカルストレージに保存し、同期性を向上。

データ管理戦略

重要なデータはサーバーに保存：ローカルストレージはキャッシュ的な役割にとどめる。
データの期限管理：定期的にデータを更新する仕組みを設ける。
デバイス間同期：クラウドベースのストレージを併用して、複数デバイスでの一貫性を維持。

次のセクションでは、データの保存形式を最適化する方法について説明します。

データフォーマットの工夫

リモートデータをローカルストレージに保存し、再利用する際には、データのフォーマットが効率的な管理の鍵となります。このセクションでは、データフォーマットの最適化と活用方法について解説します。

JSON形式の活用

ローカルストレージは文字列データしか保存できませんが、JSON形式を使用することで、構造化データの保存が可能になります。

保存例

配列やオブジェクトをJSON形式に変換して保存します。

const userData = { name: 'Alice', age: 30, preferences: { theme: 'dark' } };
localStorage.setItem('user', JSON.stringify(userData));

取得例

保存されたJSONデータをオブジェクトに戻します。

const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.preferences.theme); // 'dark'

データ分割とキー設計

1つのキーにすべてのデータを保存するのではなく、用途に応じてキーを分割すると管理が容易になります。

例: 分割保存

localStorage.setItem('user:name', 'Alice');
localStorage.setItem('user:preferences:theme', 'dark');

この方法では、必要なデータのみを効率的に取得できます。

const userName = localStorage.getItem('user:name');
console.log(userName); // 'Alice'

圧縮の活用

ローカルストレージの容量を節約するために、データを圧縮して保存することも有効です。lz-stringなどのライブラリを利用すれば、簡単に圧縮できます。

圧縮例

import { compress, decompress } from 'lz-string';

const data = { name: 'Alice', age: 30 };
const compressedData = compress(JSON.stringify(data));
localStorage.setItem('compressedUser', compressedData);

解凍例

const compressedData = localStorage.getItem('compressedUser');
const originalData = JSON.parse(decompress(compressedData));
console.log(originalData.name); // 'Alice'

暗号化の適用

セキュリティを強化するために、保存前にデータを暗号化することが可能です。AESなどの暗号化手法を提供するライブラリ（例：CryptoJS）を使用できます。

暗号化例

import CryptoJS from 'crypto-js';

const data = { name: 'Alice', age: 30 };
const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), 'secret-key').toString();
localStorage.setItem('encryptedUser', encryptedData);

復号化例

const encryptedData = localStorage.getItem('encryptedUser');
const bytes = CryptoJS.AES.decrypt(encryptedData, 'secret-key');
const originalData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
console.log(originalData.name); // 'Alice'

データ整合性の確保

保存したデータが壊れないように、ハッシュを追加して整合性を確認する仕組みを導入することも有効です。

ハッシュの利用例

import CryptoJS from 'crypto-js';

const data = JSON.stringify({ name: 'Alice', age: 30 });
const hash = CryptoJS.SHA256(data).toString();
localStorage.setItem('user:data', data);
localStorage.setItem('user:hash', hash);

データ取得時にハッシュを再計算して比較します。

const data = localStorage.getItem('user:data');
const savedHash = localStorage.getItem('user:hash');
if (CryptoJS.SHA256(data).toString() === savedHash) {
  console.log('Data is intact');
} else {
  console.error('Data integrity compromised');
}

ポイント

構造の柔軟性：JSONや圧縮、暗号化を適切に組み合わせて効率的な保存を実現する。
セキュリティ：暗号化やハッシュを利用して、データの安全性を向上させる。
スケーラビリティ：データ分割とキー設計で将来的なデータの増加に対応可能とする。

次のセクションでは、Reactのライブラリを利用したデータ管理の効率化方法について説明します。

ライブラリの活用方法

Reactのエコシステムには、ローカルストレージやデータ管理を効率化するための優れたライブラリが多数存在します。このセクションでは、具体的なライブラリとその活用方法を紹介します。

React Contextと`useReducer`

ローカルストレージとReactの状態管理を組み合わせて使う場合、useReducerをContextで活用すると便利です。

実装例

以下の例は、ローカルストレージをデータ永続化の手段として使用しながら、useReducerで状態を管理する方法を示します。

import React, { useReducer, createContext, useEffect } from 'react';

const initialState = JSON.parse(localStorage.getItem('appData')) || { user: null, theme: 'light' };

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'SET_THEME':
      return { ...state, theme: action.payload };
    default:
      return state;
  }
};

export const AppContext = createContext();

export const AppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    localStorage.setItem('appData', JSON.stringify(state));
  }, [state]);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};

これにより、状態が変更されるたびにローカルストレージにデータが同期されます。

Redux Persist

Reduxを使用している場合は、redux-persistを利用すると、状態をローカルストレージやセッションストレージに簡単に保存できます。

インストール

npm install redux-persist

基本設定

以下はredux-persistの基本的な設定例です。

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // ローカルストレージを使用

const persistConfig = {
  key: 'root',
  storage,
};

const rootReducer = (state = {}, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

この設定により、Reduxの状態がローカルストレージに保存され、自動的に復元されます。

localForage

localForageは、ローカルストレージの代替として使えるライブラリで、IndexedDBやWebSQLなどもサポートします。容量制限の緩和や非同期操作の効率化に役立ちます。

インストール

npm install localforage

使用例

以下は、localForageを使ってデータを保存・取得する例です。

import localforage from 'localforage';

// データ保存
localforage.setItem('user', { name: 'Alice', age: 30 }).then(() => {
  console.log('Data saved');
});

// データ取得
localforage.getItem('user').then((data) => {
  console.log('Retrieved data:', data);
});

SWRとReact Query

リモートデータの取得とキャッシュ管理を効率化するためのライブラリとして、SWRとReact Queryが人気です。

SWRの基本例

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function App() {
  const { data, error } = useSWR('https://api.example.com/data', fetcher);

  if (error) return <div>Error loading data.</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{JSON.stringify(data)}</div>;
}

React Queryの基本例

import { useQuery } from '@tanstack/react-query';

function App() {
  const { data, isLoading, error } = useQuery(['data'], () =>
    fetch('https://api.example.com/data').then((res) => res.json())
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading data.</div>;

  return <div>{JSON.stringify(data)}</div>;
}

ポイント

ContextやRedux Persist: 状態管理とローカルストレージを統合したい場合に有効。
localForage: 大量データや非同期処理が必要な場合に適している。
SWRやReact Query: リモートデータの取得とキャッシュ管理を効率化するための強力なツール。

次のセクションでは、リモートデータをキャッシュとして活用する具体的な応用例について説明します。

応用例：キャッシュとしての利用

リモートデータをローカルストレージに保存し、キャッシュとして活用することで、アプリケーションのパフォーマンスを向上させたり、ユーザー体験を向上させたりすることができます。このセクションでは、キャッシュ機能の具体的な応用例を紹介します。

キャッシュの基本的な仕組み

キャッシュとしてローカルストレージを利用する際の基本的な考え方は以下の通りです：

リモートデータがローカルストレージに存在する場合：保存されたデータを使用する。
データが存在しない、または期限切れの場合：新しいデータをリモートAPIから取得する。

実装例

以下は、キャッシュを使ったリモートデータの取得例です。

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const cacheKey = 'cachedData';
  const cacheTimeKey = 'cacheTime';
  const cacheExpiry = 3600000; // 1時間

  useEffect(() => {
    const cachedData = localStorage.getItem(cacheKey);
    const cacheTime = localStorage.getItem(cacheTimeKey);
    const now = new Date().getTime();

    if (cachedData && cacheTime && now - cacheTime < cacheExpiry) {
      // キャッシュが有効な場合
      setData(JSON.parse(cachedData));
      setLoading(false);
    } else {
      // キャッシュが無効または存在しない場合
      fetch('https://api.example.com/data')
        .then((response) => response.json())
        .then((fetchedData) => {
          setData(fetchedData);
          localStorage.setItem(cacheKey, JSON.stringify(fetchedData));
          localStorage.setItem(cacheTimeKey, now);
          setLoading(false);
        })
        .catch((error) => {
          console.error('Error fetching data:', error);
          setLoading(false);
        });
    }
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Data from Cache or API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

オフライン対応

キャッシュを活用することで、ユーザーがオフライン環境でもアプリを利用できるようになります。ローカルストレージに保存されたデータを優先的に使用し、ネットワーク接続が回復した際にデータを更新します。

実装例

オフライン時の対応を組み込むコードの例です。

useEffect(() => {
  const updateData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const fetchedData = await response.json();
      setData(fetchedData);
      localStorage.setItem(cacheKey, JSON.stringify(fetchedData));
      localStorage.setItem(cacheTimeKey, new Date().getTime());
    } catch (error) {
      console.warn('Network error, using cached data:', error);
    }
  };

  const cachedData = localStorage.getItem(cacheKey);
  if (cachedData) {
    setData(JSON.parse(cachedData));
  }
  updateData();
}, []);

部分的なキャッシュの活用

アプリケーションの一部だけにキャッシュを利用するケースも有効です。たとえば、フィルタリングや検索結果の一時保存、あるいはページネーションされたデータの再利用などに活用できます。

例：フィルタリング結果のキャッシュ

function saveFilterResults(filterKey, results) {
  localStorage.setItem(`filter:${filterKey}`, JSON.stringify(results));
}

function getFilterResults(filterKey) {
  const data = localStorage.getItem(`filter:${filterKey}`);
  return data ? JSON.parse(data) : null;
}

キャッシュのクリーンアップ

古いデータを定期的に削除することで、ローカルストレージの効率を保つことができます。

例：クリーンアップロジック

function cleanupCache(expiry) {
  const cacheTime = localStorage.getItem(cacheTimeKey);
  const now = new Date().getTime();
  if (cacheTime && now - cacheTime > expiry) {
    localStorage.removeItem(cacheKey);
    localStorage.removeItem(cacheTimeKey);
    console.log('Cache cleared');
  }
}

// 1日以上経過したキャッシュを削除
cleanupCache(86400000);

キャッシュの利点

パフォーマンス向上：APIへのリクエストを減らし、アプリの応答速度を向上させる。
コスト削減：ネットワークトラフィックを削減し、サーバー負荷を軽減する。
ユーザー体験の向上：オフライン時や低速ネットワーク環境でもスムーズに動作する。

次のセクションでは、キャッシュやローカルストレージに関連するトラブルシューティングの方法を説明します。

トラブルシューティング

ローカルストレージやキャッシュを使用する際に、発生しやすい問題とその解決方法を解説します。これらの課題に対処することで、より堅牢で信頼性の高いアプリケーションを構築できます。

1. データが正しく保存されない

原因

ローカルストレージの容量制限（通常5MB）を超えている。
データが正しくシリアライズ（文字列化）されていない。

解決方法

保存データの容量を確認し、大きなデータは分割保存やIndexedDBの活用を検討します。
JSON形式の使用時にJSON.stringifyでシリアライズし、保存前にデータを検証します。

try {
  const data = { name: 'Alice', age: 30 };
  localStorage.setItem('user', JSON.stringify(data));
} catch (error) {
  console.error('Error saving data:', error);
}

2. 古いデータが使用される

原因

キャッシュの有効期限を設定していない。
リモートデータの更新タイミングを反映していない。

解決方法

キャッシュデータにタイムスタンプを保存し、有効期限を超えた場合にデータを更新します。

const now = new Date().getTime();
const cacheTime = localStorage.getItem('cacheTime');

if (!cacheTime || now - cacheTime > 3600000) { // 1時間経過
  fetchDataAndUpdateCache();
}

3. データが正しく取得できない

原因

ローカルストレージのキーが間違っている。
データ形式が変更され、取得時にパースエラーが発生している。

解決方法

保存時と取得時に同じキーを使用しているか確認します。
データを取得する前に、値が正しい形式で保存されているか検証します。

const cachedData = localStorage.getItem('data');
if (cachedData) {
  try {
    const parsedData = JSON.parse(cachedData);
    console.log(parsedData);
  } catch (error) {
    console.error('Error parsing cached data:', error);
  }
}

4. ローカルストレージが突然空になる

原因

ユーザーがブラウザのストレージを手動で削除した。
プライベートモードやセッション終了時にデータがクリアされる設定になっている。

解決方法

ユーザーに対し、アプリでローカルストレージを利用していることを明示します。
ローカルストレージが空の場合にデータを再取得するフェールセーフを実装します。

if (!localStorage.getItem('key')) {
  console.log('Local storage is empty, refetching data...');
  fetchDataAndUpdateCache();
}

5. パフォーマンスの問題

原因

ローカルストレージへの頻繁なアクセス。
大量のデータを一度に読み書きしている。

解決方法

必要最低限のデータのみを保存し、分割管理します。
重要なデータ以外は、IndexedDBなどのストレージを利用して保存します。

6. セキュリティリスク

原因

ローカルストレージは暗号化されておらず、開発者ツールから容易にアクセス可能。
機密データが誤って保存されている。

解決方法

機密情報をローカルストレージに保存しない。
必要に応じて、データを暗号化して保存します。

import CryptoJS from 'crypto-js';

const encryptedData = CryptoJS.AES.encrypt('Sensitive Data', 'secret-key').toString();
localStorage.setItem('secureData', encryptedData);

const bytes = CryptoJS.AES.decrypt(localStorage.getItem('secureData'), 'secret-key');
const originalData = bytes.toString(CryptoJS.enc.Utf8);
console.log(originalData);

ポイント

トラブルシューティングでは、問題の再現性を確認し、根本的な原因を特定することが重要です。
フェールセーフの設計やデータ検証の導入により、多くの問題を未然に防ぐことができます。

次のセクションでは、この記事の内容をまとめ、データ管理の重要性を再確認します。

まとめ

本記事では、Reactを使用してリモートデータをローカルストレージに保存し、再利用する方法について詳しく解説しました。ローカルストレージの基本から、データ保存と取得の実装、キャッシュの活用、トラブルシューティングまで幅広くカバーしました。

ローカルストレージを活用することで、アプリケーションのパフォーマンス向上やオフライン対応を実現できますが、容量制限やセキュリティの課題もあります。適切なフォーマット、ライブラリの活用、キャッシュの管理を通じて、効率的で安全なデータ管理を目指しましょう。

この記事を参考に、Reactアプリケーションのデータ管理をさらに最適化してみてください。