概要
ReactのHooksに関して学び始めた際にuseEffectの使用方法、特に第２引数部分の意味の理解に苦しんだので、そのまとめです。
useEffectとは
ReactのHooksの１つです。
公式では、副作用を実行するフックのように説明されています。
ざっくり言うと、ライフサイクルメソッドを関数コンポーネントで実現する為に使われたりします。
このuseEffectですが、2つの引数を持ちます。
まず第１引数
第2引数を空にすると、Render毎に実行される関数を取ります。
useEffect(() => {
console.log("毎回実行");
});
※ コメントにて@ryo0さんに補足して頂きましたが、実際はuseEffectの第2引数を空にすると、FCのstate, propsのうちいずれかが更新される度にuseEffectのbodyが走るようになる為危険です。その為、通常第2引数を空にすることはありません。
そして第２引数
第２引数を与える事で第１引数の関数が実行されるタイミングを自在にコントロールする事ができます。
下記の２つのケースを考えます。
(1) 空の配列が渡された場合
第2引数に空の配列が渡された場合、最初のrender時のみ第１引数の関数を実行します。
// 最初のrender時のみ第１引数の関数を実行
useEffect(() => {
console.log('最初のrender時のみ実行')
}, [])
(2)値の配列が渡された場合
第2引数に値の配列が渡された場合、最初のマウント時と与えられた値に変化があった場合のみ第１引数の関数を実行します。
// 与えられた値に変化があった場合のみ第１引数の関数を実行
useEffect(() => {
console.log('変化があった場合の実行')
}, [value])
まとめ
- 第2引数を指定なし=>
Render毎に第１引数の関数を実行。 - 第2引数に
[]を指定 => 最初のrender時に第１引数の関数を実行。 - 第2引数に値の配列を指定 => 最初の
render時と指定された値に変化があった場合`のみに第１引数の関数を実行。
参照
本記事では非常に簡単なuseEffectの説明を行いました。
より詳しく、正確な詳細等は下記を参照してください。