Reactの用語整理

用語	役割	いつ実行されるか
Reactのレンダリング	仮想DOMの作成(実DOMへの更新はしないので画面に影響はあたえない）	useState, props の更新時
レンダー	コンポーネントの処理全体（ほぼレンダリングと同じ意味）	return <JSX> が呼ばれるとき
初回レンダリング	最初のマウント時のレンダリング	コンポーネントが最初に表示されるとき
再レンダリング	状態や props の変更で仮想DOMが作り直される	ステート更新 (setState) や props 変更時
コミット	実際のDOMを更新するフェーズ	仮想DOMと実際のDOMの差分を適用するとき
ブラウザのレンダリング（描画）	画面上に表示される	コミットフェーズ後、ブラウザが処理する

React のレンダリング（仮想DOM の処理）

React の「レンダリング」は、仮想DOM（Virtual DOM）を作成・更新する処理のこと。

React のレンダリングの流れ

1. 仮想DOMを作成
2. 前回の仮想DOMと比較（Diffing）
3. 変更があれば、実際のDOMに適用（コミットフェーズ）
4. ブラウザが画面に描画

• React のレンダリングは 「仮想DOMまでの処理」 を指す。
• React のレンダリング ＝ 画面に直接影響しない（仮想DOMの変更を計算するだけ）。

ブラウザのレンダリング（実際の画面の描画）

React が commit フェーズで 実際のDOMを更新 すると今度はブラウザがレンダリング処理（描画）を行う。

ブラウザのレンダリングの流れ

1. DOM の構築（HTML 解析）
2. CSS の適用（CSSOM）
3. レイアウト（Layout）：各要素のサイズ・位置を計算
4. ペイント（Paint）：画面にピクセルを描画
5. コンポジット（Composite）：各レイヤーを合成し、最終的な画面を描画

• この処理を「ブラウザのレンダリング（描画）」と言う
• React の「レンダリング」とは 別の処理