React hooks useEffect

March 22, 2022

React.js

React.js useEffectの振る舞い

React.js userEffect 基本

レンダリング後に実行される

useEffect(() => {
  document.title = `${count}回クリックされました`
})

最初のレンダリング時のみ実行させたいときは第２引数にからの配列

useEffect(() => {
  document.title = `${count}回クリックされました`
  console.log(`再レンダーされました`)
}, [])

依存関係を指定する

useEffect(() => {
  document.title = `${count}回クリックされました`
  console.log(`再レンダーされました`)
}, [count])

クリーンアップ

useEffect() では、副作用関数がクリーンアップ関数を返すことで、マウント時に実行した処理をアンマウント時に解除します。またその副作用関数は、毎回のレンダリング時に実行され、新しい副作用関数を実行する前に、ひとつ前の副作用処理をクリーンアップします。

useEffect(() => {
  elm.addEventListener("click", () => {
  })

  // returned function will be called on component unmount
  return () => {
    elm.removeEventListener("click", () => {
    })
  }
}, [])