🚀
React Hook解説<useEffect編>
何が嬉しいの？
結局ここですよね。自分含めてそう感じます。
実際になにが嬉しいのか、また主なケースはどこなのかについて解説していきたいと思います。
TL;DR
値が書き換わる度に何かの値を書き換えたい時に有効。
例
GCSに登録してあった画像を取得した時
初期画面では、ロード画面の短縮のためにスケルトンなんかを使用します。（まあ、、自分はそこまでは至れてないんですけど。とほほ）
実際に画像URLが取得できた際にImageのsrcを書き換えたい際に利用します。
実際に利用する方法はこちら
pages/[id].tsx
useEffect(() => {
const getImage = async () => { // 1
if (user.image) {
const imageURL = await getImageFromGcs(String(user.image))
setImage(imageURL) // 2
}
}
getImage() // 3
}, [user]) // 4
解説
- getImageという非同期関数を定義しています。これはユーザー情報に紐づく画像が存在する場合、その画像を取得するために使用します。
- ここで非同期関数を宣言するのには理由があります。
- react hookでは直接非同期にすることができません。
- getImageFromGcsという関数を呼び出して、ユーザー情報に紐づく画像のURLを取得します。取得した画像のURLを、setImage関数を用いてimageステートにセットします。
- useStateに関してはまた次回以降解説していこうと思います！
- getImage関数を呼び出して、ユーザー情報に紐づく画像があれば取得します。
- 宣言した関数を実際に呼び出します！
- 第二引数に指定されている[user]は、userステートが変更された場合にuseEffectフック内の関数を再度実行するための依存配列です。つまり、userステートが変更された場合に、getImage関数が再度呼び出され、画像が更新されるようになります。
(やっぱりGPT優秀。。。！)
画面に表示しているユーザーを自分がフォローしているか
このユーザーをフォローしているかどうかを判断してボタンを切り替えたい時とかあるじゃないですか？ありますよね？（圧）
実際に利用する方法はこちら
pages/[id].tsx
useEffect(() => {
if (session?.user) {
const checkIsFollower = async () => {
const res = await executeQuery('Following', { userId: session?.user.id })
const result = res.following.some((item: any) => item.targetUserID === user.id)
if (result) {
setIsFollow(true)
}
}
checkIsFollower()
}
}, [session?.user])
これもコード自体は違えどやっていることはほとんど一緒なので説明は割愛させてくださいmm
結論
useEffect最強〜〜〜〜〜〜！
ではでは〜！
参考文献
筆者
Discussion