NO IMAGE

【React】useEffectとは?概要と用途に応じた書き方を紹介

NO IMAGE

ここでは、組み込みのReact hookであるuseEffectの概要と、用途に応じた書き方を紹介します。

useEffectとは?

useEffectとは、「関数の実行タイミングをReactのレンダリング後まで遅らせるhook」です。副作用の処理(DOMの書き換え、変数代入、API通信などUI構築以外の処理)を関数コンポーネントで扱えます。

React hooksを基礎から理解する (useEffect編) – Qiita

また後述しますが、レンダリング後だけでなく、コンポーネントをDOMから削除して破棄する(アンマウントする)際に実行するように書くこともできます。ここでいう「副作用」のイメージがやや掴みづらいのですが、私は「レンダリング(アンマウント)後にやりたい何らかの処理なんだな〜」とふんわり理解しています。

書き方あれこれ

レンダリング毎に実行する

useEffectに第一引数だけを渡すと、コンポーネントがレンダリングされる度に実行されます。

useEffect(() => {
  console.log("レンダリング毎に実行されるよ");
});

依存する値の更新時だけ実行する

useEffectの第2引数には、配列の形で副作用が依存している値を渡せます。ここを指定することで、その値(のどれか)が更新された時だけ実行するような挙動になります。

useEffect(() => {
  console.log("依存値の更新時に実行されるよ");
}, [hoge, fuga]);

最初のレンダリング後1度だけ実行する

依存値を表す第2引数に空の配列を指定すると、コンポーネントがレンダリングされた後に1度だけ実行されます。

useEffect(() => {
  console.log("レンダリング後に1度だけ実行されるよ");
}, []);

アンマウント後に実行する

コンポーネントがアンマウント、あるいは再実行されたときに実行(クリーンアップ)することもできます。

以下のように、useEffectの副作用内で関数を返すことで実現します。

useEffect(() => {
  return () => {
    console.log("クリーンアップの実行だよ");
  }
});

参考