useEffectとasync/awaitを使用した非同期処理の実装方法

2024-02-10 03:52 ReactHooksuseEffect

  1. useEffectフックの基本的な使い方

    • useEffectは、コンポーネントがレンダリングされた後に実行される関数です。
    • useEffectの第2引数に依存配列を指定することで、特定の値の変更時にのみ実行されるように制御できます。

  2. 非同期処理の実装

    • async/awaitキーワードを使用して非同期処理を実装します。
    • 非同期処理を含む関数を作成し、その関数内でawaitキーワードを使用して非同期処理の完了を待機します。

  3. useEffect内での非同期処理の実行

    • useEffect内で非同期処理を実行するためには、非同期関数を定義し、その関数を直接呼び出すことができます。
    • または、useEffect内で即時実行関数を使用することもできます。

以下に、実装例を示します。

import React, { useEffect } from 'react';
const MyComponent = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);
  return <div>コンポーネントの内容</div>;
};
export default MyComponent;

上記の例では、useEffect内で非同期関数fetchDataを定義し、即時実行しています。非同期関数内でfetchを使用してデータを取得し、JSONデータをコンソールに表示します。エラーが発生した場合は、コンソールにエラーメッセージを表示します。

このように、useEffectとasync/awaitを組み合わせることで、Reactアプリケーションで非同期処理を簡単に実装することができます。