【React】レンダリングの仕組み・ライフサイクル関数（Render Phase → Commit Phase）

まえがき

Reactのレンダリングは２つのフェーズがあることを最近知ったので、そのまとめ記事。
下記の記事が分かりやすかった。

レンダリングの流れ

・state, propsが変更される。
　↓
　↓（変更されたので画面を作り直す）
　↓
・propsに変更があった画面のrender()を実行＝変更後の仮想DOMを生成する。
　↓
・変更前の仮想DOMと変更後の仮想DOMを比較し、実DOMに反映すべき箇所を特定
　↓
・実DOMに反映する

↑のレンダリングは2段階に分かれる

・state, propsが変更される。
　↓
　↓（変更されたので画面を作り直す）
　↓
・propsに変更があった画面のrender()を実行＝変更後の仮想DOMを生成する。【render phase】
　↓
・変更前の仮想DOMと変更後の仮想DOMを比較し、実DOMに反映すべき箇所を特定
　↓
・実DOMに反映する【commit phase】

render phase

・変更後のDOMを生成するために各画面のrender()を実行するフェーズ。
・下記のライフサイクル関数が実行される。
・レンダリングするために複数回実行されうるもの。
　→ 故に↓のライフサイクル関数内には、複数回実行されても大丈夫な処理（副作用でない処理）を定義する。

componentWillMount
componentWillReceiveProps
componentWillUpdate
getDerivedStateFromProps
shouldComponentUpdate

commit phase

・実DOMを変更するフェーズ。
・下記のライフ関数が実行される。
・実DOMへの変更は1回で行うので、下記のライフサイクル関数は1回だけ実行される。
　→ 副作用の処理（DOMの書き換え、変数代入、API通信などUI構築以外の処理）はここに書け👍
・副作用＝状態を変更する処理

componentDidMount
componentDidUpdate
componentWillUnmount
componentDidCatch

関数コンポーネントで使うuseEffect関数はどのライフサイクル関数に紐づく？

・commit phaseの以下３つに紐づく。

componentDidMount（useEffect）
componentDidUpdate（useEffect）
componentWillUnmount（useEffect）
componentDidCatch

まとめ

・レンダリング(Rendering Phase)中に、副作用とされる処理（状態を変えるもの）は呼び出してはいけない。
　→ レンダリングは何回呼びだされても同じものを返す処理であるべきだから。
　　副作用の代表例であるAPIなんかは、渡すパラメータによっては結果が変わるようなもの。

・結局Effectとは？
　→ レンダリング時に呼び出される副作用の処理を定義できるもの。

Effects let you specify side effects that are caused by rendering itself, rather than by a particular event. 引用元

その他

React.memo