99
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

【React】useEffectの第2引数って?

概要

ReactのHooksに関して学び始めた際にuseEffectの使用方法、特に第2引数部分の意味の理解に苦しんだので、そのまとめです。

useEffectとは

ReactのHooksの1つです。
公式では、副作用を実行するフックのように説明されています。
ざっくり言うと、ライフサイクルメソッドを関数コンポーネントで実現する為に使われたりします。

このuseEffectですが、2つの引数を持ちます。

まず第1引数

第2引数を空にすると、Render毎に実行される関数を取ります。

useEffect(() => {
  console.log("毎回実行");
});

※ コメントにて@ryo0さんに補足して頂きましたが、実際はuseEffectの第2引数を空にすると、FCのstate, propsのうちいずれかが更新される度にuseEffectのbodyが走るようになる為危険です。その為、通常第2引数を空にすることはありません。

そして第2引数

第2引数を与える事で第1引数の関数が実行されるタイミングを自在にコントロールする事ができます。
下記の2つのケースを考えます。

(1) 空の配列が渡された場合

第2引数に空の配列が渡された場合、マウント・アンマウント時のみ第1引数の関数を実行します。

// マウント・アンマウント時のみ第1引数の関数を実行
useEffect(() => {
  console.log('マウント時のみ実行')
}, [])

(2)値の配列が渡された場合

第2引数に値の配列が渡された場合、最初のマウント時と与えられた値に変化があった場合のみ第1引数の関数を実行します。

// 与えられた値に変化があった場合のみ第1引数の関数を実行
useEffect(() => {
console.log('変化があった場合の実行')
}, [value])

まとめ

  • 第2引数を指定なし=> Render毎に第1引数の関数を実行。
  • 第2引数に[]を指定 => マウント時とアンマウント時に第1引数の関数を実行。
  • 第2引数に値の配列を指定 => マウント時と指定された値に変化があった場合のみに第1引数の関数を実行。

参照

本記事では非常に簡単なuseEffectの説明を行いました。
より詳しく、正確な詳細等は下記を参照してください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
99
Help us understand the problem. What are the problem?