・外部APIを取得する際の注意点
こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法をまとめました。
こんにちは、フロントエンドエンジニアのてりーです。 僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。 ノウハウがたまってきたので、React + TypeScriptの勉強[…]
2024年現在にフロントエンドエンジニアとして、良い条件を目指していくなら是非ともReactは使える状態にしていきたいですね！
今回はReact Hooksの中でも、useEffectに焦点を当てて解説していきます。
では、どうぞ！！
useEffectとは
useEffectは、コンポーネントを外部システムと同期させるための React フックです。
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内で実行でいけそう！！！
イメージ⇩（別の実装でごめんね）
フロントエンドでキャリアアップを考えているなら
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 今回は大学中退してニートだった自分が完全未経験からメガベンチャーに入社した方法について解説していきます。 ・完全未経験から将来的なメガベンチャー転[…]