useEffect
副作用フック
コンポーネントのレンダリング後に指定した処理を実行できる
componentDidMount / componentWillUnmount に相当
使い方
useEffect(func)
code:jsx
const Component = () => {
useEffect(() => {
/* レンダリング後に実行したい処理 */
})
}
用途
DOM操作
Web APIとの通信
useEffectは遅延実行という事実の他に「関数コンポーネントの外に処理を追い出す」という隠れた意味を持ちます。
クリーンアップ関数を登録する
そもそもuseEffectはレンダリングのたびに呼ばれます。なので副作用の中でイベントリスナの登録やタイマーのセットをしていると、何重にも副作用が走ることになります。そこで「クリーンアップ関数」をreturnすることで、2度目以降のレンダリング時に前回の副作用を消してしまうことができます。
code:tsx
const App = () => {
useEffect(() => {
const id = setInterval(() => {
setTime(new Date().getTime());
}, 1000);
return () => clearInterval(id);
}, []);
..
ref