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

・useEffectの使い方
・外部APIを取得する際の注意点

こんにちは、フロントエンドエンジニアの「てりー」です。
僕の詳しいプロフィールはこちら

Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法をまとめました。

関連記事

僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。ノウハウがたまってきたので、React + TypeScriptの勉強方法をまとめようと思います。すでにReact+Ty[…]

2024年現在にフロントエンドエンジニアとして、良い条件を目指していくなら是非ともReactは使える状態にしていきたいですね!

今回はReact Hooksの中でも、useEffectに焦点を当てて解説していきます。

では、どうぞ!!

useEffectとは

useEffect は、コンポーネントを外部システムと同期させるための React フックです。

引用:React公式ドキュメント useEffect

useEffectの特徴は関数の実行タイミングを任意で設定できる事です!
関数コンポーネントの処理タイミングに関係なく、好きなタイミングで実行出来るので、「副作用フック」と呼ばれたりもします。

副作用フックの別名通り、DOMの書き換え、変数の代入、API通信などの副作用を扱うのに適しています。

useEffectの基本形

以下が基本形です。

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

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

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

実行関数はuseEffectが呼び出されるごとに新しく作られます。

ですので、画像の様にif文を使ったり、状況に応じて処理を変えることなども可能です

依存配列と実行関数

依存配列が[ ](空配列)だと、ブラウザが最初に読み込まれた時に実行関数の処理が走ります。


依存配列に値が指定されている場合は、最初に実行関数の処理が走り、その後は依存配列の中の値に変更があった時に再度、実行されます

useEffectで非同期処理を行う

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

コールバックの中にasync関数やPromiseは書けません。
useEffectの戻り値はundefinedかクリーンアップ関数でないとダメだからです!

useEffectの非同期処理の基本形

このような形になります。

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

非同期処理がいつ実行されるかによっては、コンポーネント削除のタイミングと被ってしまう場合があります。

その為、クリーンアップ関数でunmountedを扱って、複数回に渡ってデータ取得をしないようにします。

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

追記(2021/3/9)

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

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

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

もし現状の仕事に不満があるなら

転職ドラフトに登録して見てはいかがでしょうか?
実際に企業からのオファーを受ける事で、企業から見た自分の強みや市場価値などポジティブな発見がたくさんあります!!
関連記事

「転職ドラフトはハイスペックなエンジニア向けだけ?」と思っていませんか?実は、技術力に自信がない、あるいは業界経験が浅いエンジニアこそ、転職ドラフトを使うべきなんです。そういったエンジニアの多くは転職ドラフトに登録する際、レジュ[…]