useEffect の概要と async function を使う際の注意点 - 30歳からのプログラミング

使用している React のバージョンは16.8.4。 レンダー後の処理を指定するための仕組み React Hooks の一つであるuseEffectは、レンダー後に実行したい処理を React に伝えるための仕組み。 useEffect(fn)と記述すると、DOMの更新が終わったあとにfnを実行する。 useEffectはレンダー後に必ず実行される。最初にレンダーした際もそうだし、propsやstateに変更があってレンダーし直した際もそう。そこに区別はない。 以下の例では、このコンポーネントが表示された際にeffect!というログが流れる。 そしてボタンを押下した際にも、その都度effect!というログが流れる。 import React, {useState, useEffect} from 'react'; const App = () => { const [state, set

[Adeptus]

useEffectはレンダー「後」というのがポイント。propを使った処理をここでやると必ず２回レンダーするコンポーネントになってしまう。

[u_tis]

認証処理のカスタムフック内部でuseEffectを実行する時とかにこれをやる。

[efcl]

"副作用関数のなかで非同期処理を行う際の注意点"