Part 4 — 最新の React (2026)

Part 3 では、JSX・コンポーネント・useState・useEffect といった React の土台を見てきました。ここからの Part 4 では、React 19（2024 年 12 月 5 日リリース）で導入された機能と、案件で避けて通れないテーマ（Suspense、Context、Refs、パフォーマンス）をまとめて扱います。

この Part のねらいは、API 名を暗記することではありません。「なぜその API が必要になったのか」を理解して、目の前のコードで適切に選べるようになる ことを目指しましょう。シグネチャや全オプションの列挙は公式リファレンスが丁寧に書いてくれているので、このサイトではメンタルモデルと判断材料の方を厚めに書いていきます。

全体像

図 4.0.1 Part 4 で扱うテーマの全体像

この Part の章一覧

• 4.1 React 19 概観 — リリースされた機能の全体像と、アップグレードで気にかけたい点
• 4.2 Actions / use / useOptimistic — フォームと楽観的更新 — <form action={fn}>、useActionState、useFormStatus、useOptimistic、use
• 4.3 Suspense と非同期データ — <Suspense>、React.lazy、Error Boundary との組み合わせ
• 4.4 Context — 使いどころと避けどころ — createContext、React 19 の <Context value={...}> 省略記法、useReducer との組み合わせ
• 4.5 Refs — エスケープハッチ — useRef、DOM 参照、React 19 の ref-as-prop と cleanup
• 4.6 パフォーマンス — memo, useMemo, useCallback, React Compiler — 計測を先に、最適化を後に。useTransition と useDeferredValue

この Part を読み終えると

• React 19 で導入された API を、「何のために作られたか」「いつ選ぶか」という観点から理解できるようになります。
• <Suspense> と Error Boundary、Context と props、Ref と state の使い分けを、自分の頭で判断できるようになります。
• 「とりあえず useMemo」「とりあえず useCallback」と手癖で書く前に、計測してから決める という発想が身につきます。
• Server Components への接続点（Part 5 で本格的に扱います）を把握できます。

読み進め方

4.1 → 4.2 → 4.3 の順で読むと流れが自然です。4.4 / 4.5 / 4.6 は互いに独立しているので、興味のある順に読んで構いません。Server Components と絡む話題（use(promise)、Server Actions）は概観だけ触れ、本題は Part 5 で扱います。