Reactで配列を非同期取得し効率的にレンダリングする方法

非同期でデータを取得し、それをReactアプリケーションで効率的にレンダリングする技術は、モダンなWeb開発において非常に重要です。APIやデータベースから取得した配列データを正確かつスムーズに表示することは、ユーザーエクスペリエンスを向上させる鍵となります。本記事では、Reactでの非同期処理の基本から、効率的なデータ取得とレンダリングの実装方法、さらにパフォーマンスの最適化までを段階的に解説します。これにより、複雑な非同期データ操作でも柔軟かつ効果的に対応できるスキルを習得できるでしょう。

Reactでの非同期処理の基本
データフェッチングに適したツールとライブラリ
useEffectを用いたデータの取得方法
ローディング状態とエラーハンドリングの実装
データ取得後の配列のレンダリング方法
データのキャッシュと再利用のベストプラクティス
パフォーマンスを意識した非同期処理
応用例: リアルタイムデータの取得と表示
まとめ

Reactでの非同期処理の基本

非同期処理は、アプリケーションがリソースを効率的に活用しつつ、応答性を維持するために不可欠な手法です。Reactでは、非同期処理を組み込むことで、外部APIやデータベースからデータを取得し、ユーザーに動的なコンテンツを提供することが可能です。

非同期処理の概要

JavaScriptでは、非同期処理は主にPromiseやasync/await構文を使用して実現されます。これらを活用することで、処理が完了するまで他の操作をブロックせずにアプリケーションを動かし続けることができます。Reactでは、これをコンポーネントのライフサイクルに組み込むことが一般的です。

Reactでの非同期処理の位置づけ

ReactはUIの状態を管理するライブラリであり、非同期処理を直接扱う機能は持っていません。そのため、非同期データの取得や状態管理は、以下のような方法で実現します。

fetch API: ネイティブのデータ取得手段で、簡単な非同期処理に最適です。
axios: fetchより高度な設定やエラーハンドリングを提供する人気のライブラリ。
GraphQLクライアント: Apollo Clientなどを用いると、非同期データの取得が簡潔に行えます。

Reactでの非同期処理の課題

非同期処理をReactに組み込む際には、以下の課題に注意が必要です。

状態の管理: データ取得中、成功、エラーなどの状態を適切に管理する必要があります。
UIの更新: 非同期処理の結果を元に効率的にUIを再描画する必要があります。
パフォーマンスの最適化: 冗長なリクエストや不要な再描画を避けるための工夫が求められます。

次章では、これらを解決するために、Reactで非同期処理を効率的に実装するツールやライブラリについて解説します。

データフェッチングに適したツールとライブラリ

Reactで非同期データを効率的に取得するためには、適切なツールやライブラリを選ぶことが重要です。ここでは、データフェッチングに広く利用される主要なツールを紹介し、それぞれの利点と用途を解説します。

fetch API

fetch APIは、ブラウザに標準搭載されているデータ取得のためのインターフェースです。簡潔な構文で非同期リクエストを行うことができ、APIからJSONデータを取得するのに適しています。

例: fetch APIでのデータ取得

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

利点: ネイティブサポート、簡単に使用可能。
欠点: エラーハンドリングや設定の柔軟性が限定的。

axios

axiosは、fetch APIを拡張したHTTPクライアントライブラリです。Promiseベースで、リクエストやレスポンスのインターセプタ、タイムアウト設定など、fetch APIでは難しい高度な操作を簡単に実現できます。

例: axiosを使ったデータ取得

import axios from "axios";

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

利点: 柔軟な設定、高度なエラーハンドリング機能。
欠点: 外部ライブラリとしてインストールが必要。

React Query

React Queryは、非同期データフェッチングとキャッシュ管理に特化したライブラリです。状態管理を自動化し、ローディングやエラー処理も組み込まれているため、コードを簡潔に保ちながら高いパフォーマンスを実現します。

例: React Queryでのデータ取得

import { useQuery } from "react-query";

const { data, isLoading, error } = useQuery("fetchData", () =>
  fetch("https://api.example.com/data").then(res => res.json())
);

if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error occurred: {error.message}</p>;

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

利点: キャッシュ、リアルタイム更新、簡単な非同期処理。
欠点: ライブラリに対する学習コストが必要。

どれを選ぶべきか

プロジェクトの規模や要求に応じてツールを選びましょう。シンプルなアプリではfetch APIやaxiosが適していますが、大規模なアプリケーションではReact Queryのような専用ライブラリを活用すると効率的です。

次章では、非同期データ取得をReactのコンポーネントにどのように組み込むかを具体的に解説します。

useEffectを用いたデータの取得方法

Reactでは、非同期データの取得をコンポーネントに組み込む際に、useEffectフックを使用するのが一般的です。useEffectはコンポーネントのライフサイクルに基づいて実行されるため、非同期処理のトリガーとして非常に適しています。

useEffectの基本構文

useEffectは、特定の条件下で副作用（サイドエフェクト）を実行するためのフックです。以下の基本構文でデータ取得を実装できます。

useEffect(() => {
  // 非同期処理
  const fetchData = async () => {
    try {
      const response = await fetch("https://api.example.com/data");
      const result = await response.json();
      setData(result); // データを状態に保存
    } catch (error) {
      console.error("データ取得エラー:", error);
    }
  };

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

非同期処理をuseEffectに組み込む方法

useEffect内では非同期関数を直接使用できませんが、内部で非同期関数を定義して呼び出すことで実現可能です。上記の例は、この手法を利用しています。

依存配列の使い方

useEffectの第2引数である依存配列を活用することで、非同期処理を特定の条件でのみ実行できます。例えば、フィルタ条件やユーザーIDが変更されたときにデータを取得したい場合は以下のように実装します。

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

  fetchData();
}, [userId]); // userIdが変更された場合のみ再実行

注意点

クリーンアップ関数
非同期処理が実行中にコンポーネントがアンマウントされる場合、競合状態（stale state）を避けるためにクリーンアップ関数を実装することが推奨されます。

useEffect(() => {
  let isMounted = true;

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

  fetchData();

  return () => {
    isMounted = false; // アンマウント時にフラグを解除
  };
}, []);

エラーハンドリング
エラーが発生した際のロジックを追加することで、ユーザーに適切なフィードバックを提供できます。

次章では、データ取得中のローディング状態やエラー処理について具体的な実装方法を解説します。

ローディング状態とエラーハンドリングの実装

Reactで非同期データを取得する際には、データの取得中にローディング状態を表示し、エラーが発生した場合に適切なメッセージを表示することで、ユーザーにわかりやすいフィードバックを提供することが重要です。

ローディング状態の管理

ローディング状態を管理するために、useStateフックを使用して状態を追跡します。以下は、ローディング状態を実装する例です。

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true); // ローディング状態
  const [error, setError] = useState(null); // エラー状態

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true); // データ取得開始時にローディング状態をtrueに
      try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) {
          throw new Error("データ取得に失敗しました");
        }
        const result = await response.json();
        setData(result); // データを状態に保存
        setError(null); // エラー状態をリセット
      } catch (err) {
        setError(err.message); // エラーメッセージを設定
      } finally {
        setLoading(false); // データ取得終了時にローディング状態をfalseに
      }
    };

    fetchData();
  }, []);

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

  return (
    <div>
      <h1>データ取得成功</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetchingComponent;

エラーハンドリングの重要性

エラーハンドリングを実装することで、次のような状況に対応できます。

ネットワークエラー
サーバーに接続できない場合、ユーザーに再試行を促すUIを提供します。
不正なレスポンス
レスポンスデータが期待と異なる場合やステータスコードがエラーの場合、適切なメッセージを表示します。

エラーハンドリングの詳細実装

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

ローディングとエラー状態のベストプラクティス

シンプルで明確なUI: ローディング中にはアニメーションやスケルトンスクリーンを活用すると、ユーザー体験が向上します。
再試行ボタンの実装: ユーザーが簡単に再試行できる仕組みを用意します。
特定のエラーへの対応: ステータスコードに応じたエラーメッセージを用意することで、問題の詳細をユーザーに伝えます。

次章では、取得した配列データをどのようにレンダリングするか、その実装方法を解説します。

データ取得後の配列のレンダリング方法

非同期で取得した配列データをReactで適切にレンダリングすることで、ユーザーに動的でわかりやすいコンテンツを提供できます。この章では、基本的な配列のレンダリング方法から、効率的なレンダリングの実現手法までを解説します。

配列をレンダリングする基本手法

Reactでは、取得した配列データをmap関数を用いてレンダリングします。以下はその基本的な実装例です。

例: 配列データのレンダリング

function DataList({ data }) {
  return (
    <ul>
      {data.map((item, index) => (
        <li key={item.id || index}>{item.name}</li>
      ))}
    </ul>
  );
}

key属性の重要性:
配列データをレンダリングする際にkey属性を指定することで、Reactが各アイテムを識別し、効率的に差分を計算して再描画を最適化します。

条件付きレンダリングの実装

取得データが空の場合や特定の条件を満たさない場合には、代替コンテンツを表示することが推奨されます。

例: 条件付きレンダリング

function DataList({ data }) {
  if (!data || data.length === 0) {
    return <p>表示するデータがありません。</p>;
  }

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

高度なレンダリング手法

大規模なデータセットを扱う場合、以下の技術を組み合わせるとパフォーマンスが向上します。

1. 分割レンダリング（Chunk Rendering）

データを小さなチャンクに分けてレンダリングすることで、初期ロード時間を短縮します。
例: チャンク分割の概念

const chunkSize = 10;
const [visibleItems, setVisibleItems] = useState(chunkSize);

const handleLoadMore = () => {
  setVisibleItems(prev => prev + chunkSize);
};

return (
  <div>
    {data.slice(0, visibleItems).map(item => (
      <div key={item.id}>{item.name}</div>
    ))}
    {visibleItems < data.length && (
      <button onClick={handleLoadMore}>もっと見る</button>
    )}
  </div>
);

2. 仮想化（Virtualization）

大規模データセットでは、React VirtualizedやReact Windowなどのライブラリを活用し、スクロールに応じて表示するデータを制限することでレンダリングコストを削減します。

例: React Windowを使用した仮想化

import { FixedSizeList } from "react-window";

const Row = ({ index, style, data }) => (
  <div style={style}>
    {data[index].name}
  </div>
);

<FixedSizeList
  height={400}
  itemCount={data.length}
  itemSize={35}
  itemData={data}
>
  {Row}
</FixedSizeList>;

配列データの加工とソート

データをレンダリングする前に、加工やソートを行うことで、ユーザーにとってわかりやすい形式に変換します。

例: ソートとフィルタリング

const sortedData = data
  .filter(item => item.isActive)
  .sort((a, b) => a.name.localeCompare(b.name));

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

UX向上のための工夫

スケルトンスクリーンの導入: ローディング中に仮のUIを表示することで、読み込み中の違和感を軽減します。
アニメーションの活用: データが表示される際にアニメーションを加えることで、より視覚的に魅力的なUIを提供します。

次章では、取得データのキャッシュと再利用を効率的に管理するためのベストプラクティスを解説します。

データのキャッシュと再利用のベストプラクティス

非同期データを効率的に管理するためには、キャッシュを活用して、データの再利用や重複リクエストを防ぐことが重要です。キャッシュを適切に設定することで、アプリケーションのパフォーマンスとユーザー体験が大幅に向上します。この章では、Reactでキャッシュを管理するためのベストプラクティスを解説します。

なぜキャッシュが重要なのか

キャッシュを利用することで以下のメリットが得られます。

高速なレスポンス: データを再取得する必要がなくなり、ユーザーへの応答速度が向上します。
リソースの節約: ネットワークやサーバーへの負荷を軽減できます。
オフライン対応: キャッシュを保持することで、ネットワーク接続が不安定な場合でもデータを表示できます。

React Queryでのキャッシュ管理

React Queryは、非同期データの取得、キャッシュ、再利用を簡単に実現するライブラリです。状態管理やリクエストの冗長化を防ぐ機能が組み込まれており、キャッシュの有効期限や再フェッチのタイミングを柔軟に設定できます。

例: React Queryの基本的なキャッシュ利用

import { useQuery } from "react-query";

const fetchUserData = async () => {
  const response = await fetch("https://api.example.com/users");
  if (!response.ok) {
    throw new Error("データ取得に失敗しました");
  }
  return response.json();
};

function UserList() {
  const { data, isLoading, error } = useQuery("users", fetchUserData, {
    staleTime: 5000, // キャッシュが新鮮とみなされる時間（ミリ秒）
    cacheTime: 600000, // キャッシュが保持される最大時間
  });

  if (isLoading) return <p>読み込み中...</p>;
  if (error) return <p>エラーが発生しました: {error.message}</p>;

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

キャッシュを使ったデータの再利用

React Queryのキャッシュは、複数のコンポーネント間で自動的に共有されます。同じキーを使用するリクエストは、キャッシュされたデータを再利用するため、余分なリクエストを防ぎます。

例: 他のコンポーネントでキャッシュを再利用

const { data } = useQuery("users", fetchUserData);

Revalidation（再検証）の活用

キャッシュされたデータを使用しつつ、バックグラウンドで最新データを取得するRevalidationは、パフォーマンスとデータの新鮮さを両立させる方法です。

例: データのバックグラウンド更新

useQuery("users", fetchUserData, {
  refetchOnWindowFocus: true, // ウィンドウフォーカス時に再フェッチ
  refetchOnReconnect: true, // ネットワーク再接続時に再フェッチ
});

キャッシュ戦略の設計

短期キャッシュ: 更新頻度の高いデータには短いキャッシュ時間を設定します。
長期キャッシュ: 変更頻度が低いデータには長いキャッシュ時間を設定します。
プリフェッチ: ユーザーが必要とするデータを事前に取得し、スムーズな遷移を実現します。

例: プリフェッチの実装

import { queryClient } from "react-query";

queryClient.prefetchQuery("users", fetchUserData);

Redux Toolkit Queryの活用

Reduxを使用しているプロジェクトでは、Redux Toolkit Queryを利用してキャッシュと非同期データの取得を一元管理できます。

例: Redux Toolkit Queryのキャッシュ設定

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: "https://api.example.com" }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => "/users",
      keepUnusedDataFor: 300, // キャッシュ保持時間（秒）
    }),
  }),
});

export const { useGetUsersQuery } = api;

ベストプラクティスまとめ

適切なキャッシュキー: キャッシュを正しく識別するために一貫性のあるキーを使用します。
キャッシュの更新タイミングを考慮: 必要な場面で最新データにアクセスできるよう戦略を設計します。
ライブラリを活用: React QueryやRedux Toolkit Queryを活用して複雑なロジックを簡潔化します。

次章では、非同期処理とレンダリングのパフォーマンスを向上させる方法について詳しく解説します。

パフォーマンスを意識した非同期処理

Reactで非同期データを処理する際、パフォーマンスの最適化はアプリケーションの応答性とスムーズなユーザー体験を実現するために重要です。この章では、非同期処理やレンダリングでのパフォーマンス向上の手法を解説します。

非同期処理の冗長を防ぐ

重複したリクエストや不要な再レンダリングを防ぐための工夫を行います。

1. 非同期処理の依存関係を適切に設定

useEffectフックで依存配列を適切に設定することで、不要なリクエストを防ぎます。

例: 正しい依存配列設定

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(`https://api.example.com/data/${id}`);
    const result = await response.json();
    setData(result);
  };

  fetchData();
}, [id]); // idが変わったときのみ再実行

2. 非同期処理のデバウンスとスロットリング

ユーザーの入力やスクロールに応じたリクエストはデバウンス（処理の遅延）やスロットリング（一定間隔で処理）を適用することで、リクエスト数を減らします。

例: lodashを使用したデバウンス

import { debounce } from "lodash";

const debouncedFetch = debounce((query) => {
  fetch(`https://api.example.com/search?q=${query}`).then(res => res.json()).then(setData);
}, 500);

useEffect(() => {
  debouncedFetch(searchTerm);
}, [searchTerm]);

レンダリングの最適化

1. React.memoによる再レンダリングの抑制

React.memoを使用することで、プロパティが変更されない場合に再レンダリングを防ぐことができます。

例: React.memoの使用

const ListItem = React.memo(({ item }) => {
  return <li>{item.name}</li>;
});

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

2. useCallbackとuseMemoの活用

関数や計算済み値をメモ化することで、無駄な再生成を回避します。

例: useCallbackの使用

const handleClick = useCallback(() => {
  console.log("Button clicked!");
}, []);

例: useMemoの使用

const sortedData = useMemo(() => {
  return data.sort((a, b) => a.name.localeCompare(b.name));
}, [data]);

3. レイジーローディングとコード分割

必要なデータやコンポーネントだけを遅延ロードすることで初期レンダリングを軽量化します。

例: React.lazyによる遅延ロード

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <LazyComponent />
    </Suspense>
  );
}

4. 仮想化（Virtualization）の利用

大量データのレンダリングには仮想化を導入することで、必要なデータだけをDOMに描画します。

例: React Windowによる仮想化

import { FixedSizeList } from "react-window";

function VirtualizedList({ data }) {
  return (
    <FixedSizeList
      height={400}
      itemSize={35}
      itemCount={data.length}
      itemData={data}
    >
      {({ index, style, data }) => (
        <div style={style}>{data[index].name}</div>
      )}
    </FixedSizeList>
  );
}

非同期処理の並列化と最適化

1. 複数のリクエストを並列で処理

Promise.allを活用することで、複数の非同期処理を同時に実行して効率化を図ります。

例: 複数APIの並列フェッチ

useEffect(() => {
  const fetchData = async () => {
    const [users, posts] = await Promise.all([
      fetch("https://api.example.com/users").then(res => res.json()),
      fetch("https://api.example.com/posts").then(res => res.json()),
    ]);
    setUsers(users);
    setPosts(posts);
  };

  fetchData();
}, []);

2. 不要なリクエストのキャンセル

競合状態を防ぐため、AbortControllerを利用して未処理のリクエストをキャンセルします。

例: リクエストのキャンセル

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

  fetch("https://api.example.com/data", { signal: controller.signal })
    .then(response => response.json())
    .then(setData)
    .catch(err => {
      if (err.name !== "AbortError") {
        console.error(err);
      }
    });

  return () => controller.abort(); // クリーンアップでリクエストをキャンセル
}, []);

パフォーマンス向上のまとめ

非同期処理を最適化し、不要なリクエストを防ぐ。
再レンダリングを抑制し、リソースの使用効率を高める。
仮想化やコード分割で大量データや重いコンポーネントの影響を最小限に抑える。

次章では、応用例としてリアルタイムデータの取得と表示について解説します。

応用例: リアルタイムデータの取得と表示

Reactを用いてリアルタイムデータを取得し、動的に更新されるUIを構築することは、ライブフィードやダッシュボードなどのアプリケーションで重要な要素です。この章では、リアルタイムデータを取得するための方法と、Reactでの実装例を解説します。

リアルタイムデータの取得方法

リアルタイムデータを取得するために、以下の手法が一般的に利用されます。

1. WebSocket

WebSocketは、双方向通信を実現するプロトコルで、サーバーからクライアントへのリアルタイムデータ送信を効率的に行えます。

例: WebSocketを使ったリアルタイム更新

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

function RealTimeComponent() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = new WebSocket("wss://example.com/socket");

    socket.onmessage = (event) => {
      setMessages((prev) => [...prev, JSON.parse(event.data)]);
    };

    return () => socket.close(); // クリーンアップで接続を閉じる
  }, []);

  return (
    <ul>
      {messages.map((msg, index) => (
        <li key={index}>{msg.content}</li>
      ))}
    </ul>
  );
}

2. Server-Sent Events (SSE)

SSEは、サーバーがクライアントにデータを一方向で送信するシンプルな手法です。HTTPを使用するため、軽量なリアルタイム更新に適しています。

例: SSEを使ったリアルタイム更新

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

function RealTimeComponent() {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource("https://example.com/events");

    eventSource.onmessage = (event) => {
      setEvents((prev) => [...prev, JSON.parse(event.data)]);
    };

    return () => eventSource.close(); // クリーンアップで接続を閉じる
  }, []);

  return (
    <ul>
      {events.map((event, index) => (
        <li key={index}>{event.title}</li>
      ))}
    </ul>
  );
}

3. Polling

Pollingは定期的にサーバーにリクエストを送り、新しいデータを取得する方法です。実装はシンプルですが、サーバー負荷が高くなる場合があります。

例: Pollingによるデータ取得

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

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

  useEffect(() => {
    const interval = setInterval(async () => {
      const response = await fetch("https://example.com/data");
      const result = await response.json();
      setData(result);
    }, 5000); // 5秒ごとにデータを取得

    return () => clearInterval(interval); // クリーンアップでタイマーを解除
  }, []);

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

Reactでのリアルタイム更新のポイント

1. 状態の管理

リアルタイムデータの更新は頻繁に発生するため、状態管理が重要です。

ローカルステート: 小規模なデータに適用。
グローバルステート: ContextやReduxなどを利用して大規模データを管理。

2. レンダリングの最適化

リアルタイム更新による頻繁な再レンダリングを防ぐために、以下の方法を利用します。

React.memo: 子コンポーネントの不要な再描画を防ぐ。
バッチ処理: データ更新を一定の間隔でまとめて処理。

例: データ更新のバッチ処理

useEffect(() => {
  const updates = [];
  const interval = setInterval(() => {
    if (updates.length > 0) {
      setMessages((prev) => [...prev, ...updates]);
      updates.length = 0; // リセット
    }
  }, 1000);

  socket.onmessage = (event) => {
    updates.push(JSON.parse(event.data));
  };

  return () => clearInterval(interval);
}, []);

3. エラーハンドリングと再接続

接続エラーが発生した場合の再試行ロジックを実装します。

例: WebSocketの再接続

useEffect(() => {
  const connect = () => {
    const socket = new WebSocket("wss://example.com/socket");

    socket.onclose = () => {
      setTimeout(connect, 5000); // 5秒後に再接続
    };

    return socket;
  };

  const socket = connect();

  return () => socket.close();
}, []);

リアルタイムデータの応用例

チャットアプリ: WebSocketを用いてメッセージをリアルタイムで表示。
株価表示: SSEを活用して変動データをリアルタイム更新。
通知システム: PollingやWebSocketで新着情報を配信。

リアルタイムデータを活用することで、インタラクティブでエンゲージメントの高いアプリケーションを構築できます。次章では、記事全体のまとめを行います。

まとめ

本記事では、Reactを使った非同期処理と配列データの取得・レンダリング方法を解説しました。基本的な非同期処理の仕組みから、useEffectを用いたデータ取得、ローディング状態やエラー処理の実装方法、効率的なレンダリング手法、キャッシュの活用、さらにリアルタイムデータの取得までを網羅的に紹介しました。

非同期処理を適切に実装することで、データ取得の効率化やユーザー体験の向上が可能になります。また、React Queryや仮想化といったツールや技術を活用することで、大規模アプリケーションでもスケーラブルでパフォーマンスの高いアプリを構築できます。

今回学んだ内容を活用し、非同期データの処理と表示を強化することで、さらに魅力的で機能的なアプリケーションを開発してください。