Open1
【React】useEffectの第二引数による挙動の変化
yu.miyoshi概要
useEffectの第二引数指定時の挙動について記述します。
useEffectとは
Reactに用意されている関数です。
引数には実行する処理をまとめた関数を指定することで、コンポーネントが更新された際に指定の関数を実行して、必要な処理を行えるようになります。
// useEffect使用例
......
const [val, setVal] = useState(0)
const [msg, setMsg] = useState('set a number ...')
useEffect(() => {
let total = 0
for (let i = 0;i <= val;i++>) {
total += 1
}
setMsg("total: " + total + ".")
})
......
何かしらの処理でvalを受け取り、1からその数字までの合計をmsgに反映します。
useEffectの中に関数を用意するだけで、コンポーネントがマウントされたり表示が更新されたりした際に指定の関数が実行されるようになります。
useEffectの第二引数に配列をした際の挙動
第二引数に、ステートの配列を指定することで、再呼び出しのフックを指定することができます。
useEffect( 関数 , [ ステート ])
第二引数の配列に指定したステートが更新されたとき、この副作用フックが再度呼び出されます。
配列にステートをもつ場合
// hogeが変更された場合に副作用フックが再度呼び出される
useEffect(() => {
let total = 0
for (let i = 0;i <= val;i++>) {
total += 1
}
setMsg("total: " + total + ".")
}, [hoge])
配列にステートをもたない場合
useEffectはデフォルトで、初回のレンダー時および毎回の更新時に呼び出されます。
配列にステートをもたない形を指定してあげると、レンダリングは初回のみで再レンダーされません
useEffect(() => {
let total = 0
for (let i = 0;i <= val;i++>) {
total += 1
}
setMsg("total: " + total + ".")
}, [])
参考サイト