useEffectについてまとめ
componentDidMount / componentDidUpdateに対応する書き方
code: sample.tsx
useEffect(() => {
// ここに書いた処理は、コンポーネントがマウントされたときと更新されたときに実行される
});
componentDidMountに対応する書き方
code: sample.tsx
useEffect(() => {
// ここに書いた処理は、コンポーネントがマウントされたときに実行される
}, []); // 第2引数に空配列を渡す
componentDidMountに対応してかつ、一部のstate更新時だけに処理が走る書き方
code: sample.tsx
useEffect(() => {
// ここに書いた処理は、コンポーネントがマウントされたときと、hogeが更新されたときに実行される
}, hoge); // 第2引数の配列に、変更をトリガにしたいstateを指定する componentWillUnmountに対応する書き方
code: sample.tsx
useEffect(() => {
// ここに書いた処理は、コンポーネントがマウントされたときと更新されたときに実行される
// useEffectの中で関数をreturn
return () => {
// ここに書いた処理は、componentWillUnmountに対応するタイミングで実行される
}
});