ぶうううん's Cafe

どうにかこうにか。備忘録に近い。

ReactのuseEffect()の第二引数

React

 多分React初心者なら誰もが気になるuseEffect()の第二引数についてです。私が気になった部分について書きます。

useEffect()についておさらい

  • 副作用に関する挙動を書くReact Hooksである。
  • レンダリングされたDOMが画面に反映された後に動作する。(同期的なレンダリングを行いたい場合、useLayoutEffect()という関数を利用できる)
  • デフォルトだとレンダリング終了後に毎回呼び出されるが、第二引数でタイミングを変更可能である。
    • 空の配列 ([]) を渡した場合、useEffect()では props と state の値は常にその初期値のままとなる。

useEffect()の第二引数にsetState()を渡したら？

 useEffect()内にてstateを利用することは良くある。例えば、他のuseEffect()でstateを更新していて、そのstateが更新されたときに処理を行いたい場合等。その場合、useEffect()の第二引数には更新対象のstateを含むだろう。では、そのstateを更新するsetState()も第二引数に含んだらどうなるのだろうか?

結論：特に変わらない。stateを監視したいのであればそのstateのみを第二引数に含めれば良く、setState()を含める必要はない。

Reactのドキュメントに以下のような記述がある。

React は再レンダー間で setState 関数の同一性が保たれ、変化しないことを保証します。従って useEffect や useCallback の依存リストにはこの関数を含めないでも構いません。

References