ちょっと学ぶプログラミング状態と表示の食い違い
key・更新・保持・不要なEffect
1行を追加すると入力内容がずれるkey は何に使われるか / 添字を使うと起きること
22回更新したのに1しか増えない1回の描画の中では state は変わらない / 関数形式の更新
3値を変えたのに画面が更新されない同じ参照は「変わっていない」と判断される
4親を更新すると子も動くのはなぜ？どこまで再描画されるか / memo が止められる条件
5Effectが古い値を読み続ける実行のタイミング・依存配列・掴んだ値
6画面を切り替えると入力が消える同じ場所・種類・keyの対応を追う。取り除いたstateと更新で保持するstateを区別する。
7不要なEffectを見抜く表示から導ける値は直接計算し、Effectは外部との同期に使う。
8古い応答で上書きしない依存の変更後に来る古い応答を無効にする。結果の無視と通信の中断は別。
9memoを使ってもContextで更新されるContextを読むコンポーネントは、購読している値が変われば更新されます。
10続けてdispatchすると値はいくつになる？dispatchは更新を予約します。
11価格を変えたのに古い価格で保存されるここでは同じマウントが続き、キャッシュの破棄は起きない条件です。
12画面を閉じた後も購読が残らないかsubscribe(id)は接続を開始し、解除関数を返す外部APIです。
13保存に失敗したら仮表示はどう戻る？楽観的表示は成功を待たず仮の値を見せます。
14送信中なのにボタンを押せてしまうフォームの親子関係・待機中の操作・重複対策
教材の前提
props・state・Effectに加え、Context・更新の優先度・フォーム送信の動きを予測する応用コース。React Baseを学んだ方向けです。React 19.2.0、createRoot、React Compiler無効。StrictModeは対象単元以外では無効として扱います。
進捗はこのブラウザに保存します。file:// では保存できない場合もありますが、学習は続けられます。