【React hooks】噛み砕いて解説してみた~useEffect編~

公開:2021/02/07
更新:2021/02/07
2 min読了の目安(約2000字TECH技術記事

前書き

16.8vで追加された機能であるreact hooksを理解を深めるために体系的にまとめました。

以下、本題です

useEffectとは

関数コンポーネント内で「副作用」を実行できます。

そもそも副作用ってなに?

簡単に説明すると**「関数の外に影響を与えてしまう関数」**のことを指すことが多いです。例えば

  • console.log
  • DOMの手動変更
  • APIでのデータの取得

などのことです。「Reactにおける「副作用」とは?」の記事がわかりやすかったので一読して見ると良いかもしれません。

useEffectは実際に何ができるのか

噛み砕いて説明すると副作用(何らかの関数)を特定のタイミングで実行することができます。基本的な形をみていきましょう。

import React, { useState, useEffect } from 'react'

const Home = () => { 
  const [name, setName] = useState('')

  // ここで実際に使われています。
  useEffect(() => {
    console.log({name})
  })

  const handleName = (e) => {
    setName(e.target.value)
  }
  return(
    <>
      <h1>{name}</h1>
      <input onChange={handleName}></input>
    </>
  )
}

export default Home

注目すべきところは

useEffect(() => {
  console.log({name})
})

の部分です。useEffect関数内でこのように副作用を宣言してあげることで、レンダー時に副作用(関数)が実行されます。

以降から、どのタイミングで副作用が呼ばれるか確認していきましょう!

【1】レンダー後に実行される副作用を宣言

もっともスタンダードな形です。下記のように定義することで、副作用がレンダー(レイアウトと描画)の後に毎回実行されます。

useEffect(() => {
  console.log({name})
})

【2】アンマウント時に実行される副作用を宣言

クリーンアップ関数を実行したいときはuseEffectreturn内に書いてあげれば、アンマウント時にクリーンアップしてくれます。(公式ドキュメントからコピペしました。)

useEffect(() => {
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  }
})

クリーンアップにはイベントリスナーの削除等によく使われます。

【3】特定の条件の時に副作用を実行したい場合

この場合、useEffectの第二引数に配列の形で、何らかの値(変数等)を入れてあげてください。この値が変更された時だけ、副作用が実行されます。

下記の例では、nameの更新時に副作用(console.log)を実行するようになっています。

useEffect(() => {
  console.log({name})
},
[name]
)

【4】更新時には副作用を実行したくない場合

useEffectの第二引数に空の配列を渡してあげれば、更新時には副作用は実行されません。

useEffect(() => {
  console.log({name})
},
[]
)

以上です!