Reactで配列データの非同期処理を効率的に扱う方法

Reactで配列データを非同期に操作するシナリオは、モダンなフロントエンド開発において頻出します。例えば、サーバーから取得したデータをリスト表示するケースや、ユーザーが動的にデータを追加・編集するアプリケーションでは、非同期処理が欠かせません。しかし、非同期処理と配列操作が絡むと、競合やエラーが発生しやすく、適切な管理が求められます。本記事では、ReactのHooksやベストプラクティスを活用して、非同期処理と配列操作を効率的に行う方法を解説します。これにより、信頼性が高くメンテナンス性の優れたコードを書く力を身につけられます。

配列操作と非同期処理の基本概念
非同期処理を用いた配列データの取得方法
配列データの操作に適したReact Hooks
データ更新の競合を防ぐ方法
非同期処理でエラーを適切に処理する方法
大量データの効率的な操作
データ更新時の再レンダリングの最適化
応用例: APIレスポンスデータを加工して表示
まとめ

配列操作と非同期処理の基本概念

Reactで配列データを操作する際、非同期処理が必要になる場面は多くあります。これには、サーバーからのデータ取得、データの追加や削除、さらにはリアルタイムでのデータ更新が含まれます。

非同期処理とは

非同期処理は、操作が終了するまでプログラムの他の部分を待たせない方式を指します。JavaScriptでは、Promiseやasync/awaitを使用して非同期処理を管理します。これにより、データがサーバーから届くまでユーザーインターフェースが停止しないようにすることが可能です。

配列操作と非同期処理の関係

配列操作では、以下のような非同期処理が必要になることがあります：

データ取得：APIからのデータフェッチにより、配列にデータを格納する。
データ更新：配列内の特定の要素を変更または削除する。
リアルタイム変更：WebSocketやFirebaseなどでリアルタイムに配列データを更新する。

配列操作の注意点

非同期処理中に配列を操作する際には、以下の課題が発生しがちです：

状態の不一致：非同期処理が完了する前に次の操作が実行され、データが正しくない状態になる。
エラー処理の不足：データ取得や更新中のエラーが適切にハンドリングされない。
パフォーマンス低下：配列が大きくなると処理が遅くなることがある。

これらの課題を克服するには、Reactの機能や設計パターンを正しく活用することが重要です。次章では、具体的な非同期処理の実装方法について解説します。

非同期処理を用いた配列データの取得方法

基本的な非同期データ取得

Reactで配列データを非同期に取得するには、fetchやaxiosなどのライブラリを使用します。この非同期処理は通常、useEffectフックと組み合わせて実装します。以下は、APIからデータを取得し、状態に保存する例です。

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

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const result = await response.json();
        setData(result); // 配列データを状態に保存
      } catch (error) {
        console.error("データ取得中にエラーが発生しました:", error);
      } finally {
        setLoading(false); // ローディング状態を解除
      }
    }

    fetchData();
  }, []); // 空配列で初回レンダリング時にのみ実行

  if (loading) {
    return <div>データを取得中...</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

axiosを使用したデータ取得

axiosは、fetchに比べてシンプルでエラーハンドリングが容易なため、非同期処理でよく利用されます。以下はaxiosを使った例です。

import axios from "axios";

useEffect(() => {
  async function fetchData() {
    try {
      const response = await axios.get("https://api.example.com/data");
      setData(response.data); // データを状態に設定
    } catch (error) {
      console.error("axiosでのデータ取得中にエラー:", error);
    }
  }

  fetchData();
}, []);

非同期処理時のローディングとエラーの表示

非同期処理では、ローディング中やエラー時のUIを適切に制御することが重要です。以下のように、状態を利用してローディング中やエラー発生時のメッセージを表示します。

if (loading) {
  return <div>データを読み込み中...</div>;
}

if (error) {
  return <div>データの取得に失敗しました。</div>;
}

データ取得時の注意点

キーの設定：リスト要素に一意のkeyを設定して、Reactが効率的にレンダリングできるようにする。
クリーンアップ：コンポーネントがアンマウントされても非同期処理が実行されないよう、クリーンアップ処理を追加する。

非同期で取得したデータを適切に管理することで、配列データを効果的に利用するアプリケーションを構築できます。

配列データの操作に適したReact Hooks

React Hooksの役割

React Hooksは、関数コンポーネント内で状態管理やライフサイクル管理を簡潔に行うための機能です。配列データの操作と非同期処理において、特に有用なHooksは以下の通りです：

useState: 状態管理を簡単に実現。配列の操作や更新に使用。
useEffect: コンポーネントのライフサイクルに基づいた処理の実行。データ取得やサイドエフェクトの管理に使用。

配列データの状態管理

useStateを利用して、配列データを状態として管理します。以下の例では、サーバーから取得した配列データを状態に格納し、操作する方法を示します。

import React, { useState } from "react";

function ArrayStateExample() {
  const [items, setItems] = useState([]);

  const addItem = () => {
    const newItem = { id: items.length, value: `Item ${items.length}` };
    setItems([...items, newItem]); // 配列を新しい状態に更新
  };

  return (
    <div>
      <button onClick={addItem}>アイテムを追加</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
}

export default ArrayStateExample;

非同期処理のライフサイクル管理

useEffectを使用すると、コンポーネントがマウントされたタイミングや状態が更新されたタイミングで処理を実行できます。以下は、データ取得時にuseEffectを活用する例です。

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

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error("データ取得エラー:", error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []); // 空配列により初回レンダリング時のみ実行

  if (loading) {
    return <div>データを取得中...</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default FetchDataWithEffect;

配列データの操作とパフォーマンス向上

配列データの操作を効率化するためには、以下のポイントを押さえます：

イミュータブルな操作: 配列を直接変更せず、新しい配列を作成してsetStateに渡します。
依存関係の適切な設定: useEffectの依存配列を正確に設定して、不要なレンダリングを防ぎます。
メモ化: 大量のデータ操作時には、useMemoやuseCallbackを使用して計算や関数の再生成を防ぎます。

Hooksを活用したデータ操作のベストプラクティス

状態管理の最適化: 必要な範囲でのみ状態を管理し、無駄な再レンダリングを抑制する。
コードの分割: 非同期処理やデータ操作ロジックをカスタムHooksとして分離する。
エラーハンドリングの組み込み: Hooks内でエラー処理を明確に実装する。

React Hooksを効果的に利用することで、配列データの非同期処理を簡潔かつ効率的に扱うことが可能になります。

データ更新の競合を防ぐ方法

非同期処理における競合とは

Reactで非同期処理を行いながら配列データを操作する場合、競合が発生することがあります。これは、複数の非同期処理が並行して実行され、それぞれが状態を更新しようとすることで不整合が生じる問題です。典型的な例として、以下が挙げられます：

古いリクエストが後から返ってきて新しいデータを上書きする。
複数のリクエストが状態を操作して意図しない順序でデータが更新される。

競合を防ぐためのアプローチ

競合を防ぐには、以下のテクニックを組み合わせて利用します。

1. リクエストのキャンセル

非同期リクエストが不要になった場合にそれをキャンセルすることで、古いリクエストが結果を返して状態を上書きするのを防ぎます。AbortControllerを使用すると、リクエストのキャンセルが可能です。

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

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

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data", { signal });
        const result = await response.json();
        setData(result);
      } catch (error) {
        if (error.name === "AbortError") {
          console.log("リクエストがキャンセルされました");
        } else {
          console.error("エラー:", error);
        }
      } finally {
        setLoading(false);
      }
    }

    fetchData();

    return () => {
      controller.abort(); // コンポーネントがアンマウントされたらキャンセル
    };
  }, []);

  if (loading) {
    return <div>データを取得中...</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default CancelableRequest;

2. 更新リクエストの識別

状態更新が必要な場合、リクエストごとに一意の識別子を付与して、古いリクエストの結果を無視するようにします。

let currentRequestId = 0;

useEffect(() => {
  const requestId = ++currentRequestId; // 一意のリクエストIDを生成
  async function fetchData() {
    const response = await fetch("https://api.example.com/data");
    const result = await response.json();

    if (requestId === currentRequestId) {
      setData(result); // 最新のリクエスト結果のみ更新
    }
  }

  fetchData();
}, []);

3. 楽観的更新

楽観的更新は、非同期リクエストの結果を待たずに先に状態を更新し、その後結果に応じて調整するアプローチです。これにより、リクエスト間の競合を回避しつつユーザー体験を向上させます。

function optimisticUpdate(newItem) {
  setData((prevData) => [...prevData, newItem]); // 仮の更新
  async function saveData() {
    try {
      await fetch("https://api.example.com/add", {
        method: "POST",
        body: JSON.stringify(newItem),
      });
    } catch (error) {
      console.error("データ保存エラー:", error);
      // 保存に失敗した場合はデータを元に戻す
      setData((prevData) => prevData.filter((item) => item.id !== newItem.id));
    }
  }
  saveData();
}

4. 状態の排他制御

useReducerを使用して状態管理を一元化し、同時実行中の更新処理を制御します。

import React, { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_ITEM":
      return [...state, action.payload];
    case "REMOVE_ITEM":
      return state.filter((item) => item.id !== action.payload.id);
    default:
      return state;
  }
};

const [state, dispatch] = useReducer(reducer, []);
dispatch({ type: "ADD_ITEM", payload: { id: 1, name: "新しいアイテム" } });

競合を防ぐポイント

必要に応じてリクエストをキャンセルする。
最新のリクエスト結果のみを使用する。
状態更新ロジックを集中管理し、データの整合性を保つ。

これらのテクニックを組み合わせることで、非同期処理時の競合を効果的に防止し、信頼性の高いアプリケーションを構築できます。

非同期処理でエラーを適切に処理する方法

非同期処理におけるエラーの重要性

非同期処理を伴う配列データの操作では、エラー処理を正しく実装しないと、予期しない動作や不完全なデータ状態が発生します。特に、データ取得や更新に失敗した場合、ユーザーにその状況を適切に伝えることが重要です。

エラー処理の基本的な方法

Reactで非同期処理中にエラーを適切に処理するには、try-catch構文を利用します。また、エラー状態を管理するためにuseStateを使用します。

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

function ErrorHandlingExample() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) {
          throw new Error("データ取得に失敗しました。");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return <div>データを取得中...</div>;
  }

  if (error) {
    return <div>エラーが発生しました: {error}</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default ErrorHandlingExample;

エラータイプ別の処理

エラーには様々な種類があります。各エラータイプに応じて適切に処理を分けることが重要です。

ネットワークエラー

ネットワークの問題でデータ取得が失敗した場合には、リトライ機能やオフラインモードのサポートを検討します。

if (error.message === "Failed to fetch") {
  return <div>ネットワークエラーです。再試行してください。</div>;
}

サーバーエラー

サーバーがエラーを返す場合、HTTPステータスコードに基づいて適切な対応を行います。

if (response.status === 404) {
  throw new Error("リソースが見つかりませんでした。");
} else if (response.status === 500) {
  throw new Error("サーバー内部エラーが発生しました。");
}

予期しないエラー

予期しないエラーの場合、汎用的なエラーメッセージを表示します。

try {
  // 非同期処理
} catch (err) {
  console.error("予期しないエラー:", err);
  setError("何らかの問題が発生しました。");
}

エラーの再利用性を高める方法

カスタムフックを作成することで、非同期処理とエラー処理のロジックを再利用可能にできます。

import { useState, useEffect } from "react";

function useFetchData(url) {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error("データ取得に失敗しました。");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, error, loading };
}

export default useFetchData;

ユーザーへの適切なフィードバック

エラーが発生した場合は、次のアクションを案内するなど、明確で役立つメッセージを表示します。

if (error) {
  return (
    <div>
      エラーが発生しました: {error}  
      <button onClick={retry}>再試行</button>
    </div>
  );
}

非同期処理でのエラー処理のベストプラクティス

エラーを予測する: サーバーエラーやネットワーク障害を想定した処理を追加する。
ユーザーに配慮する: エラー内容を分かりやすく伝え、可能ならリトライオプションを提供する。
ロギングを行う: エラーを記録して、開発中または運用中にデバッグできるようにする。

適切なエラー処理を実装することで、ユーザーエクスペリエンスを向上させ、アプリケーションの信頼性を高められます。

大量データの効率的な操作

Reactで大量データを扱う際の課題

配列に大量のデータが含まれる場合、直接的にレンダリングを行うと、以下の問題が発生します：

パフォーマンス低下：DOMの操作が増えることで、ブラウザの描画速度が低下する。
メモリ使用量の増加：すべてのデータを一度に保持するとメモリ消費が大きくなる。
ユーザーエクスペリエンスの悪化：スクロールや操作が遅くなる。

これらを回避するためには、効率的なデータ操作とレンダリング技術が必要です。

仮想化を用いたレンダリング

仮想化（Virtualization）は、大量データの中で画面に表示される部分のみをレンダリングする手法です。Reactではreact-windowやreact-virtualizedといったライブラリが利用されます。

react-windowを使用した例

import React from "react";
import { FixedSizeList } from "react-window";

function VirtualizedList({ data }) {
  return (
    <FixedSizeList
      height={400} // 表示領域の高さ
      width={300}  // 表示領域の幅
      itemSize={35} // 各アイテムの高さ
      itemCount={data.length} // データの総数
    >
      {({ index, style }) => (
        <div style={style}>
          {data[index].name} {/* 必要なデータを表示 */}
        </div>
      )}
    </FixedSizeList>
  );
}

export default VirtualizedList;

この方法では、表示されるデータのみがレンダリングされるため、パフォーマンスが向上します。

データ分割の利用

大量データを一度にレンダリングする代わりに、ページネーションや無限スクロール（Infinite Scrolling）を利用して分割します。

ページネーションの例

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

function PaginationExample({ fetchData }) {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    async function loadPage() {
      const newData = await fetchData(page); // サーバーからページごとのデータを取得
      setData((prevData) => [...prevData, ...newData]);
    }

    loadPage();
  }, [page]);

  return (
    <div>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={() => setPage((prev) => prev + 1)}>次のページ</button>
    </div>
  );
}

export default PaginationExample;

無限スクロールの例

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

function InfiniteScrollExample({ fetchData }) {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function loadPage() {
      setLoading(true);
      const newData = await fetchData(page);
      setData((prevData) => [...prevData, ...newData]);
      setLoading(false);
    }

    loadPage();
  }, [page]);

  const handleScroll = () => {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
      document.documentElement.offsetHeight
    )
      return;
    setPage((prev) => prev + 1);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      {loading && <div>ロード中...</div>}
    </div>
  );
}

export default InfiniteScrollExample;

パフォーマンス最適化のその他の方法

メモ化: React.memoやuseMemoを使用して、不要な再レンダリングを防止する。
バッチ処理: データの一括操作を行い、頻繁な状態更新を避ける。
バックエンドでの最適化: 必要なデータ量を制御し、クライアントに送りすぎないようにする。

大量データを効率的に扱うポイント

表示領域に応じた仮想化で不要なレンダリングを防ぐ。
データを分割し、ユーザーに徐々に提供する。
クライアントとバックエンドの処理負荷をバランスさせる。

これらのテクニックを適用することで、大量データを扱うアプリケーションのパフォーマンスとユーザー体験を大幅に向上させることが可能です。

データ更新時の再レンダリングの最適化

再レンダリングが引き起こす問題

Reactでは、状態やプロパティの変更があるたびに再レンダリングが発生します。しかし、大量のデータや頻繁な状態更新がある場合、不要な再レンダリングがアプリケーションのパフォーマンスを低下させる原因になります。以下が主な問題です：

パフォーマンス低下: 無駄な再レンダリングが発生すると処理速度が遅くなる。
リソースの浪費: 不必要な計算や描画が発生する。
ユーザー体験の悪化: アプリケーションの応答性が低下する。

再レンダリングの最適化手法

Reactで再レンダリングを最適化するための方法をいくつか紹介します。

1. React.memoによるコンポーネントのメモ化

React.memoを使用すると、プロパティが変更されない限り、コンポーネントを再レンダリングしません。

import React from "react";

const ListItem = React.memo(({ item }) => {
  console.log("レンダリング:", item.name);
  return <li>{item.name}</li>;
});

function ItemList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

export default ItemList;

この例では、items配列の内容が変更されない限り、各ListItemは再レンダリングされません。

2. useCallbackを使った関数のメモ化

関数が毎回新しく生成されると、不要な再レンダリングを引き起こす可能性があります。useCallbackを使用して関数をメモ化することで、これを防ぎます。

import React, { useState, useCallback } from "react";

function Button({ onClick, children }) {
  console.log("レンダリング:", children);
  return <button onClick={onClick}>{children}</button>;
}

const MemoizedButton = React.memo(Button);

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <MemoizedButton onClick={increment}>Increment</MemoizedButton>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

useCallbackを使用することで、increment関数の再生成を防ぎます。

3. useMemoを使った値のメモ化

計算コストの高い処理を伴う値はuseMemoを使ってメモ化します。

import React, { useState, useMemo } from "react";

function ExpensiveCalculation({ items }) {
  const expensiveValue = useMemo(() => {
    console.log("計算中...");
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]);

  return <p>計算結果: {expensiveValue}</p>;
}

function App() {
  const [items] = useState([{ value: 10 }, { value: 20 }, { value: 30 }]);

  return <ExpensiveCalculation items={items} />;
}

export default App;

この例では、itemsが変更されない限り、計算は一度しか行われません。

4. コンポーネントの分割

大規模なコンポーネントを小さく分割し、再レンダリングの影響を限定的にします。分割されたコンポーネントにReact.memoを適用すると、さらに効率的です。

再レンダリングのトラブルシューティング

以下の方法で、不要な再レンダリングが発生している箇所を特定できます：

React開発者ツールの使用: 再レンダリングの頻度を確認する。
ログの挿入: コンポーネントや関数の再実行をログに記録する。
useWhyDidYouUpdateの活用: 再レンダリングの原因を特定するカスタムフックを使用する。

再レンダリングの最適化まとめ

必要に応じてReact.memoやuseCallback、useMemoを活用する。
関数や値をメモ化して再生成を防ぐ。
コンポーネントを分割し、影響範囲を限定する。

これらの最適化を実践することで、Reactアプリケーションのパフォーマンスを向上させ、スムーズなユーザー体験を提供できます。

応用例: APIレスポンスデータを加工して表示

APIレスポンスデータを加工する必要性

サーバーからのAPIレスポンスは、必ずしもそのまま表示に適しているとは限りません。データ形式が複雑だったり、不要な情報が含まれている場合には、クライアント側で加工を施してからUIに反映する必要があります。加工の例として以下が挙げられます：

データの絞り込み（フィルタリング）
順序の変更（ソート）
必要な形式への変換（マッピング）

例: データの加工と表示

以下は、APIから取得したユーザーリストを加工して表示する例です。

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

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/users");
        if (!response.ok) {
          throw new Error("ユーザー情報の取得に失敗しました");
        }
        const data = await response.json();

        // データ加工: 名前を昇順に並べ替える
        const sortedUsers = data.sort((a, b) => a.name.localeCompare(b.name));
        setUsers(sortedUsers);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return <div>ユーザー情報を読み込み中...</div>;
  }

  if (error) {
    return <div>エラーが発生しました: {error}</div>;
  }

  return (
    <div>
      <h3>ユーザーリスト</h3>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

加工例1: フィルタリング

条件に基づいて特定のデータだけを表示する場合、filterを使用します。

const filteredUsers = users.filter((user) => user.isActive);

これにより、アクティブなユーザーのみが表示されます。

加工例2: カテゴリごとにグループ化

データをカテゴリやグループごとに分けて表示する場合、以下のように加工します。

const groupedUsers = users.reduce((groups, user) => {
  const group = groups[user.role] || [];
  group.push(user);
  groups[user.role] = group;
  return groups;
}, {});

表示例

Object.entries(groupedUsers).map(([role, users]) => (
  <div key={role}>
    <h4>{role}</h4>
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  </div>
));

加工例3: ネストしたデータのフラット化

APIレスポンスがネスト構造になっている場合、データをフラットに変換する必要があります。

const flatUsers = nestedUsers.flatMap((group) => group.members);

応用: データ加工のカスタムフック

頻繁に使用する加工ロジックは、カスタムフックに分離して再利用可能にします。

function useProcessedUsers(url) {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchAndProcess() {
      try {
        const response = await fetch(url);
        const data = await response.json();
        const processed = data
          .filter((user) => user.isActive)
          .sort((a, b) => a.name.localeCompare(b.name));
        setUsers(processed);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchAndProcess();
  }, [url]);

  return { users, loading, error };
}

使用例

function UserList() {
  const { users, loading, error } = useProcessedUsers("https://api.example.com/users");

  if (loading) return <div>読み込み中...</div>;
  if (error) return <div>エラー: {error}</div>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

APIレスポンスデータ加工のポイント

データの正規化: 必要なデータだけを保持し、扱いやすい形式に変換する。
再利用性の向上: データ加工ロジックをカスタムフックやユーティリティ関数として分離する。
パフォーマンスの考慮: 大量データの場合は必要な範囲に絞り込む。

これらのテクニックを活用することで、加工済みデータを使いやすく、ユーザーに適切に表示できます。

まとめ

本記事では、Reactで配列データを非同期に扱う際の課題と、それを解決するための具体的な方法について解説しました。非同期処理の基本概念から、useEffectやuseStateを活用したデータ取得、競合防止やエラー処理の実装方法、大量データを効率的に操作する仮想化や分割処理の技術、さらにAPIレスポンスデータを加工して表示する応用例まで幅広く取り上げました。

再レンダリングの最適化やエラーハンドリングといった詳細なテクニックを実践することで、アプリケーションの信頼性とパフォーマンスを大幅に向上させることが可能です。これらを活用して、ユーザー体験を高め、メンテナンス性の高いReactアプリケーションを構築しましょう。