Reactでの非同期処理の扱い方

Reactは、UIの再レンダリングを効率的に行うことができるJavaScriptライブラリです。しかし、API呼び出しやデータの取得などの非同期処理を適切に扱わないと、UIのパフォーマンスに影響を与えることがあります。この記事では、Reactで非同期処理を扱う方法を紹介します。

Promiseを使った非同期処理

JavaScriptのPromiseは、非同期処理を扱うための標準的な手段の一つです。Reactでも、Promiseを使って非同期処理を実装することができます。

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

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

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

  if (data === null) {
    return <div>Loading...</div>;
  }

  return <div>{data}</div>;
}

この例では、useStateフックを使って、dataという状態を定義しています。useEffectフックを使って、コンポーネントがマウントされたときにAPIからデータを取得して、dataの状態を更新しています。

async/awaitを使った非同期処理

Promiseを使った非同期処理は、then/catch構文を使う必要があり、コードが煩雑になることがあります。ES2017から導入されたasync/await構文を使うことで、Promiseをより簡潔に扱うことができます。

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

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

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://example.com/api/data');
      const data = await response.json();
      setData(data);
    }
    fetchData();
  }, []);

  if (data === null) {
    return <div>Loading...</div>;
  }

  return <div>{data}</div>;
}

この例では、async/await構文を使って、非同期処理をシンプルに記述しています。asyncキーワードを使って、非同期関数を定義し、awaitキーワードを使って、Promiseの完了を待機しています。

useEffectフックを使った非同期処理の制御

Reactでは、useEffectフックを使って、コンポーネントのマウント、アップデ
ート、アンマウント時に非同期処理を制御することができます。このフックは、第2引数に渡した値が変更された場合にだけ実行することもできます。

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

function MyComponent({ id }) {
  const [data, setData] = useState(null);

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

  if (data === null) {
    return <div>Loading...</div>;
  }

  return <div>{data}</div>;
}

この例では、useEffectフックの第2引数にidを渡しています。この場合、idが変更されたときにだけ非同期処理が実行されます。これにより、idが変更されるたびにAPIリクエストが発生するのを防ぐことができます。

まとめ

Reactでの非同期処理は、Promiseやasync/awaitを使って実装することができます。また、useEffectフックを使って、コンポーネントのライフサイクルに合わせて非同期処理を制御することができます。適切に非同期処理を扱うことで、Reactアプリケーションのパフォーマンスを向上させることができます。