描画中にエラーが出ると、Reactは画面をすべて消します。Error Boundaryで包むと、その部分だけを代わりの表示に差し替えられます。受け止められるエラーとそうでないエラー、イベントハンドラーのエラーを渡す方法、表示し直す方法 ...

1つのContextに何でも入れると、どれか1つの値が変わるたびに、そのContextを読むすべてのコンポーネントが描き直されます。変わるタイミングが違う値を別々のContextに分けると、関係するコンポーネントだけが描き直されること ...

React 19では、ページの部品の中に書いたtitle・meta・linkを、Reactがheadへ移してくれます。ページの切り替え、index.htmlに最初からあるtitleとの関係、2か所で書いたとき、空のタイトルになる書き方 ...

入力のたびに重い一覧を描き直すと、文字が出るまで待たされます。useDeferredValueで一覧に渡す値を遅らせ、一覧をmemoで包むと、入力欄はすぐに更新されます。memoがないと効かないことも、ブラウザで測って確かめました。

React 19のuseFormStatusを使うと、フォームの中に置いたボタンの部品が、propsなしで送信中かどうかを読めます。使い回せる送信ボタンを作り、押したボタンの見分け方や、pendingがtrueにならない置き方を確かめ ...

React Compilerは、フォルダの指定、”use memo”を付けた関数だけの変換、実行時のフラグでの切り替え、の3つの方法で少しずつ入れられます。Vite 8で3つとも試し、Babelの設定の落とし穴 ...

React の外にあるストアを useSyncExternalStore で読むと、Transition の描画中にストアが変わっても、画面の値がそろいます。useEffect で購読する書き方と比べ、3つの引数の落とし穴も確かめまし ...

React 19 のコンポーネントを、Vitest と React Testing Library でテストする手順です。後片づけの登録、findBy での待ち方、Suspense を使うコンポーネントを await act で描画す ...

React 19 の use と Suspense は「待つ表示」、useActionState は「送信中の状態」を受け持ちますが、データのキャッシュは受け持ちません。自前のキャッシュと TanStack Query で同じ画面を作 ...

タブの切り替えで表示中の画面がSuspenseの「読み込み中…」に置き換わるのは、startTransitionで防げます。isPendingで切り替え中を示す方法、入れ子のSuspenseで待つ範囲を決める方法、keyで読み込み中に ...