useEffect内でasync/awaitを使用する方法

非同期関数を作成する方法: まず、非同期関数を作成してから、それを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>My Component</div>;
};

この例では、非同期関数fetchDataを作成し、useEffect内で呼び出しています。fetch関数を使用してAPIからデータを取得し、データをコンソールに出力しています。エラーが発生した場合は、コンソールにエラーメッセージを出力します。

useEffect内で即時関数を使用する方法: 非同期関数を別に作成する代わりに、即時関数内で直接非同期処理を実行する方法もあります。

import React, { useEffect } from 'react';
const MyComponent = () => {
  useEffect(() => {
    (async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
      }
    })();
  }, []);
  return <div>My Component</div>;
};

この例では、useEffect内で即時関数を作成し、その中で非同期処理を実行しています。fetch関数を使用してAPIからデータを取得し、データをコンソールに出力します。エラーが発生した場合は、コンソールにエラーメッセージを出力します。

以上が、useEffect内でasync/awaitを使用する方法とコード例です。これにより、非同期処理を実行しながらコンポーネントの副作用を制御することができます。