こんにちは。KOUKIです。
皆さんは、ReactのuseEffectについてご存知でしょうか。
Reactアプリがレンダリングされた時に発火するReactの組み込み機能です。
触った感触では、かなり便利そうだったので、紹介します。
useEffect – 基本機能 –
まずは、基本機能です。
次のような実装があるとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React, {useState, useEffect} from 'react' const BasicUseEffect = () => { const [count, setCount] = useState(0) const [item, setItem] = useState(0) useEffect(() => { console.log("useEffect invoked"); }) return ( <div> <button onClick={() => setCount(p => p+1)}> Click {count} </button> <input type="text" value={item} onChange={e => setItem(e.target.value)} /> </div> ) } export default BasicUseEffect |
この状態で、ブラウザを読み込んでみてください。
コンソールログに、「useEffect invoked」が表示されました。
レンダリングされたら実行されるこの機能がuseEffectです。
useEffect – ブラウザ読み込みの場合だけ処理したい –
画面に設置されたClickボタンを押下してみます。
この場合でも、useEffectが発火します。なぜなら、ボタンのイベントでレンダリングされるからです。
しかし、ブラウザの読み込み時にのみ、useEffectを実行したい場合もあると思います。
その場合は、次のようにしてください。
|
1 2 3 |
useEffect(() => { console.log("useEffect invoked"); }, []) |
useEffectの第2引数に「[]」を追加しました。この状態でボタンを押下します。
useEffectが実行されなくなりました。
ブラウザを読み込みなおしてみます。
useEffect – 条件付きレンダリング –
特定の処理が実行された時、発火したい場合もあると思います。
その場合は、次のように実装してください。
|
1 2 3 |
useEffect(() => { console.log("useEffect invoked"); }, [count]) |
countステートの状態が変化した時、useEffectを発火するようにしました。
useEffect – cleanup –
コンポーネントが破棄された時など、useEffectを無効にしたい時があります。
その場合は、return文を実装すればOKです。
|
1 2 3 4 5 6 |
useEffect(() => { ... return () => { 何らかのcleanup処理 } }, []) |
おわりに
useEffectは便利ですね。Go言語でいうinit関数と似てます^^
Reactは、slackなどのツールにも利用されているそうなので、勉強することをおすすめします！
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。