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

React

useEffectとは

まずはuseEffectについてです。

useEffectの役割は「関数の実行タイミングをReactのレンダリング後まで遅らせる事」です。

関数がレンダリングを行って画面に反映された後に実行されるので、DOMの書き換え、変数の代入、API通信などの副作用を扱うのに適しています。

以下が基本形です。

[prism language="jsx"]
 useEffect(
   () => {
      実行関数
    },
 [ 依存配列 ]
);
[/prism]

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

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

依存配列がない場合は、レンダリングごとに実行。
依存配列が[]だと最初の1回実行。
依存配列が指定されている場合は、それらに依存配列に変更があった時に再実行。

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

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

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

Qiita

React Hooks を使っている人なら必ず使うuseEffect。useEffectはとても扱いが難しく、深く考えず…

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

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

以下の形で書きます。

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

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

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

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

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

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

イメージ⇩（別の実装でごめんね）

React hookを基礎から学んだ際に役立った書籍

リンク