Reactのライフサイクルを復習する

ふと復習しておこうと思ったので、メモ書き。

ライフサイクルとは

コンポーネントが生まれてから死ぬまでの流れのこと
また、Classコンポーネント時代には、ライフサイクルメソッドがあり、ライフサイクルメソッドを使うことで
特定のタイミングで処理を行わせることができる。

代表的なライフサイクルメソッドは以下の3つ

1. componentDidMount()
2. componentDidUpdate()
3. componentWillUnmount()

また、ライフサイクルには3種類ある

1. Mounting　- コンポーネントが配置されるタイミング
2. UpDating　- コンポーネントが更新されるタイミング
3. Unmounting - コンポーネントが破棄されるタイミング

それぞれのライフサイクルで何をしているのか

Mounting - コンポーネントが配置されるタイミング

Mounting時にはコンポーネントが初期化される。つまり、useStateなどの初期値が設定される。
そして、その初期値を使ってレンダリングする。
レンダリングしたあとは、マウント後の処理としてcomponentDidMountが実行される。
useEffectは、このタイミングで初回実行される。

Updating - コンポーネントが更新されるタイミング

そのコンポーネントが更新されるタイミング、つまりuseStateで設定した初期値が変更されたり、渡ってくるpropsが変更されたタイミングで再レンダリングする。
そして、再レンダリングを行ったあとはcomponentDidUpdateが実行される。
useEffectでは、依存配列に設定している対象に変更がある場合に、第一引数に設定している関数が実行される。

UnMounting - コンポーネントが破棄されるタイミング

違う画面に遷移するタイミングや、そのコンポーネントが必要でなくなったタイミングに、アンマウント前の処理としてcomponentWillUnmountが実行される。
useEffectでは、第一引数に設定した関数のreturnでクリーンアップ関数を設定しておくと、このタイミングで実行される。

Reactのコンポーネントがレンダリングされるタイミング

タイミングは以下の3つ。

1. マウント（コンポーネントが初回ロード）された時
2. コンポーネントが更新された時
3. アンマウント（死んだ）時

こちらは図があってわかりやすい。

useEffectについて

useEffectはReactがClassコンポーネントで記述されていた時のライフサイクルを1つのhooksで記述できるようにしたもの。

effectとは、副作用という意味で、Reactにおける副作用とは「レンダリングによって「引き起こされる処理」と理解している（合っているのかは心配）。

Reactにおいて具体的な副作用とは

• DOMの変更
• APIとの通信
• console.log
• ファイルへの書き込み
• state/propsの変更
• オブジェクトまたは、その内部のプロパティへの代入
• 配列のpush

以上の処理はすべて「関数の外に影響を与えてしまう関数」である。この関数の外に影響を与える関数は、useEffectの内部に書く。

まとめ

あらためてライフサイクルについて復習してみると、useEffectがどのタイミングで動くかという理解が深まりました。
初めからuseEffectを使うのではなく、ライフサイクルを学んでからuseEffectを学んだ方が理解が早そう。