useEffectと非同期処理を用いて外部APIを取得する方法

  • 2020年12月8日
  • 2021年7月5日
  • React
  • 363view

はじめに

React hooksでは副作用の処理を目的としたuseEffectがあります。

本記事ではuseEffectの基本的な使い方の解説を行った後に、

非同期処理とuseEffectを組み合わせた外部APIの取得方法を先日作ったCOVID-19トラッカーの実装を基に解説していきます。

useEffectとは

まずはuseEffectについてです。

useEffectの役割は「関数の実行タイミングをReactのレンダリング後まで遅らせる事」です。
関数がレンダリングを行って画面に反映された後に実行されるので、DOMの書き換え、変数の代入、API通信などの副作用を扱うのに適しています。

以下が基本形です。

 useEffect(
        () => {
            実行関数
        },
        [ 依存配列 ]
    );

第一引数は実行関数で、第二引数が依存配列になります。

実行関数はレンダリングするたびに新しく作られる

実行関数はuseEffectが呼び出されるごとに新しく作られるので、画像の様にif文を使ったり、状況に応じて処理を変えることなども可能です

依存配列がない場合は、常に。依存配列が[]だと最初に一回。依存配列が指定されている場合は、それらに変更があった時に再実行されます。

依存配列でstateやpropsを使うのは注意が必要

特に依存配列を扱う際は注意が必要で、propsやstateに依存する関数入れない方が良いです。

propsやstateに依存する関数をいれていると、propsやstateが何に依存しているのかuseEffect部分だけ分からず、混乱を招くからです。

詳しくはこちらの記事などを参考にしてください。

https://qiita.com/keiya01/items/fc5c725fed1ec53c24c5

useEffectで非同期処理を行う

さてuseEffectの特徴がわかった所で非同期処理について解説していきます。

題材として先日作ったCOVID-19トラッカーの実装を扱っていきます。

ReactでCOVID-19トラッカー作成で学べる3つの事

Github:https://github.com/gunners6518/covid_19_tracker

画像の様にcovid-19のapiデータを外部から取得して表示する処理を行います。
所得できるまでの時間はLoading画面を出します。

まずコールバックの中にasync関数やPromiseはいれられません。
useEffectの戻り値はundifinedかクリーンアップ関数でなくていけないからです。

以下の形で書きます。

実際のコードだと以下の様になります。
feactData()で実際にapiデータを取得し、setDataでuseStateを更新しています。

非同期処理のタイミングによってはコンポーネント削除後に実行されたりします。

unmountedでその対策をしています。

これにより、useEffect内で非同期処理ができます。

追記(2021/3/9)

unmoutedを毎回使うのはパフォーマンス的には良くなさそう。

async、awaitを使って関数宣言→useeffect内で実行でのいけそう!!!

イメージ⇩(別の実装でごめんね)

参考

https://qiita.com/daishi/items/4423878a1cd7a0ab69eb

https://gist.github.com/tagty/fbcae0998ad439017fd1ebd119393019

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping