👀
【React】useEffect を使うタイミングはいつか？
結論
以下のタイミングで発火させたい場合のみ使う。
- コンポーネントマウント時（最初に画面が表示される時）
- 決まったstate（第2引数[]で指定したstate）が変更された時
useEffectとは？
- コンポーネントの副作用を制御するための機能。
- 以下のReactライフサイクルが1つにまとまったもの。
-
componentDidMount（コンポーネントのマウント直後に実行） -
componentDidUpdate（コンポーネントが再描写される度に実行） -
componentWillUnmount（コンポーネントがアンマウントされて破棄される直前に実行）
-
コンポーネントの副作用とは？
- コンポーネントは、stateが更新された時に毎回再レンダリングが発生する副作用がある。
- この副作用は、stateの数が多ければ多いほどパフォーマンス低下につながってしまう。
副作用を制御するには？
- 決まったstateが変更された場合のみ発火するとしておけば、副作用によるパフォーマンス低下を防げる。
- この制御をuseEffectが提供している。
副作用の制御方法
-
以下はnumというstateが変更された場合のみ発火する。
export const App = () => { useEffect(()=> { alert(); }, [num]) return {***} }
参考サイト
Discussion