useEffectとは

外部(APIなど)との通信や、DOMの直接的な更新等、関数の外のスコープに影響を与えるような処理は、副作用と呼ばれる。
Reactコンポーネントにおいて副作用を扱わなければならない場合、useEffectを使用して記述することが推奨されている。


useEffect(() => {
    firebase.auth().onAuthStateChanged(user => {
        setUser(user)
    })
}, [])

第一引数には、副作用として実行する関数を与える。
useEffectに指定することで、副作用は、コンポーネントの描写が終わった後に実行される。

また、第二引数には、副作用を実行する頻度を設定することができる。
第二引数を与えなかった場合、コンポーネントの描写後、毎回実行される。
第二引数に配列を与え、要素として変数を指定すると、指定した変数に変更があった場合のみ実行される。
今回のように空の配列を与えた場合には、初回描写時にのみ実行される。

今回は指定の頻度で十分だった。無駄な処理を避けることを心がける。

MEMO

副作用を有する可能性のある命令型のコードを受け付けます。

useEffect に渡された関数はレンダーの結果が画面に反映された後に動作します。副作用とは React の純粋に関数的な世界から命令型の世界への避難ハッチであると考えてください。

デフォルトでは副作用関数はレンダーが終了した後に毎回動作しますが、特定の値が変化した時のみ動作させるようにすることもできます。