【React】useEffectについて解説
今回はReactのhooksの1つである、useEffectについて解説します。
useEffectとは
useEffectには第一引数として、関数を渡します。
useEffectを使うと、渡された関数はレンダーの結果が画面に反映された後に動作します。
つまりuseEffectとは、「関数の実行タイミングをReactのレンダリング後まで遅らせるhook」です。
基本構文
基本構文は以下の通りです。
useEffect(() => {
// 第1引数には実行させたい関数を渡す
console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 第2引数には副作用関数の実行タイミングを制御する依存配列を渡す
第2引数は省略することができ、省略した場合はコンポーネントがレンダリングされるたびに、第1引数で渡した副作用関数が実行されます。
第2引数を指定することにより、第1引数に渡された副作用関数の実行タイミングを制御することができます。
useEffectでは、第二引数で渡された配列の内の1つでも値に変更があった場合に関数を実行します。
ちなみに、副作用関数を初回レンダリング時の一度だけ実行させたい場合は、第2引数に空の依存配列[]を指定すればOKです。
その他
その他知っておいておくべきこととして、2つあります。
- componentWillUnmountの処理
- useLayoutEffectについて
それぞれ、解説します。
まず、useEffectは第一引数の関数にreturnを書くことで、DOMのアンマウント時(コンポーネントが表示されなくなった時）の処理を追加することができます。
これがクラスコンポーネントで言う所の、componentWillUnmountの処理になります。
そして、useEffectと似たhooksとしてuseLayoutEffectというものがあります。
useEffectは一度画面が描写された後にuseEffectの中の処理が実行されますが、useLayoutEffectは画面が描写されるにuseLayoutEffectの中の処理が実行されます。
おわりに
今回はuseEffectについて解説しました。
Reactでアプリを使う場合は、100%使う機能なので覚えておきましょう。
最後に宣伝です。
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
おわり
Discussion