useEffectが行ってくれる処理まとめ

最近React Hooksを勉強し始めましたが、引数の渡し方によって処理が変わるuseEffectがややこしく感じたので、まとめてアウトプットします。

useEffectが行ってくれる処理

ClassComponentを使わなくても、FunctionComponentで下記処理を行える

1. componentDidUpdate
2. componentDidMount
3. componentWillUnmount

componentDidUpdate

画面がre-renderされたときに実行する

useEffect(function())

re-renderが起こる状況

1. 画面の更新
2. setStateなどの使用により、stateが変化したとき

componentDidMount

DOMがマウントされたときのみ実行する
（画面のre-renderではない）

useEffect(function(), [])

componentWillUnmount

DOMがアンマウントされたときのみ実行する

useEffect(function() { return function() }, [])

useEffectに渡した関数の中で関数をreturnする(cleanup functionをreturnする）
=> cleanup functionの中の処理がunmount時に実行される

その他

componentDidMount + componentDidUpdate

DOMがマウントされたとき & 画面がre-renderされたときに実行する

つまり

DOMがマウントされたとき & あるstateがsetStateで変更されたときに実行する

// stateNameは、変更検知したいstateの名前
useEffect(function(), ['stateName'])

ex) マウント時と、state.addressが更新されたときは実行したいという場合

// state内にオブジェクトが複数あるとする
const [name, setName] = useState('Ted')
const [address, setAddress] = useState('Indiana')

// DOMマウント時に実行 & addressが変更されたときは必ず実行
useEffect(funtion(), ['address'])

[]には監視したいstateを入れるイメージ

async-awaitを使うとき

useEffectでは必ず関数を返す必要があるので、
useEffectに直接async関数は書けない

// これはダメ
useEffect(async () => {}, [])

// これはOK
useEffect(() => {
  const func = async () => {}
  
  func()
}, [])

まとめ

// componentDidUpdate
useEffect(function())

// componentDidMount
useEffect(function(), [])

// componentWillUnmount
useEffect(function() { return function() }, [])

// componentDidUpdate + componentDidMount
useEffect(function(), ['propertyNameForRecalling'])