React

宣言的 UI とコンポーネントを軸に、React の基本を学ぶ。

• React の設計思想宣言的 UI、コンポーネント合成、一方向のデータフローを通して React の考え方を理解する。
• useStateuseState による状態管理、更新関数、オブジェクトと配列を安全に更新する考え方を学ぶ。
• useEffectuseEffect で外部システムと同期する方法、依存配列、cleanup の役割を学ぶ。
• useContextuseContext で深い子孫へ値を渡す仕組みと、Context を使う判断を学ぶ。
• useReduceruseReducer で関連する state の更新規則を reducer に集約する方法を学ぶ。
• useRefuseRef で DOM 要素や画面表示に使わない値を保持する方法を学ぶ。
• useImperativeHandleuseImperativeHandle で親へ公開する ref の操作を最小限に設計する方法を学ぶ。
• useLayoutEffectuseLayoutEffect を使うべき描画前の DOM 計測と、描画をブロックする注意点を学ぶ。
• useInsertionEffectuseInsertionEffect が CSS-in-JS ライブラリ実装向けである理由を学ぶ。
• useEffectEventuseEffectEvent で Effect の再同期と最新値を読む処理を分離する方法を学ぶ。
• useMemouseMemo で高コストな計算結果や参照の安定性を必要な場面だけ保つ方法を学ぶ。
• useCallbackuseCallback で関数参照を保ち、メモ化した子への不要な再レンダーを避ける方法を学ぶ。
• useTransitionuseTransition で急がない state 更新を中断可能にし、入力操作を保つ方法を学ぶ。
• useDeferredValueuseDeferredValue で遅れてもよい表示用の値を分離する方法を学ぶ。
• useIduseId でアクセシブルかつサーバー描画と整合する ID を作る方法を学ぶ。
• useSyncExternalStoreuseSyncExternalStore で React 外の store を安全に購読する方法を学ぶ。
• useDebugValueuseDebugValue でカスタム Hook の状態を React DevTools に分かりやすく表示する方法を学ぶ。
• useActionStateuseActionState で非同期 Action の結果と pending 状態をまとめて扱う方法を学ぶ。
• useOptimisticuseOptimistic で非同期 Action の完了前に UI を更新する楽観的更新を学ぶ。
• useFormStatususeFormStatus で親 form の Action 実行状態を送信ボタンへ伝える方法を学ぶ。
• React Suspense読み込み待ちの UI を境界ごとに扱う Suspense の役割と使い方を学ぶ。
• use APIuse API で Promise と Context を読み、Suspense と連携する方法を学ぶ。