⚛️ React Boundary

Reactの「境界」を学ぶ

Reactは何をするライブラリで、
何をしないのか？

「使える」から「わかる」へ。Reactの内部構造・責任範囲・フレームワークとの境界を深く理解するための教科書です。

無料で読む → 理解度チェック

Reactのポジション

Next.js （ルーティング・SSR）

↓

⚛️ React （UIレンダリング）

↓

DOM

↓

ブラウザ

📚 記事一覧

Reactの本質・内部構造を理解するための記事（現在：合計23本）

宣言的UIとは何か？

命令的UIと何が違うのか。なぜ宣言的に書くのか。

Reactの責任範囲

Reactは何をして、何をしないのか。

stateとは何か？

なぜstateが変わると再レンダリングされるのか。

レンダリングの流れ

JSX → Virtual DOM → DOMの仕組みを理解する。

なぜライブラリなのか？

ReactがAngularのようなフレームワークにならなかった理由。

+3 他3本を見る →

内部構造 (5本)

Virtual DOMの真実

"速い"という誤解。Virtual DOMの本当の価値とは何か。

Reconciliationの内部

なぜdiffがO(n)で済むのか。keyの役割。

レンダリングフェーズ

render phaseとcommit phaseはなぜ分かれているのか。

Fiberとは何か？

Stack Reconcilerの問題と中断可能レンダリング。

不変性はなぜ必要か？

state直接変更がなぜNGなのか。参照比較の仕組み。

useEffectの本質

副作用とは何か。なぜレンダリングから分離するのか。

Hooksの内部動作

なぜ順番固定なのか。連結リストとキュー構造。

memo / useMemo / useCallback

メモ化の仕組みと、いつ使うべきか。

Context APIの仕組み

Contextはいつ再レンダリングするのか。Providerの内部。

Concurrent Mode機能

startTransition・useDeferredValue の使い方と仕組み。

Suspenseの仕組み

データ待機中のUIをReactが管理する仕組み。

Error Boundaryの仕組み

レンダリングエラーをキャッチするReact独自の機構。

Reactのイベントシステム

SyntheticEventとは何か。ネイティブイベントとの違い。

Server Componentsの仕組み

RSCはどこで何をレンダリングするのか。境界の理解。

思想・境界 (1本)

Reactはどこで終わるのか？

React・フレームワーク・サーバー・ビルドツールの境界図。