lazyで包んだコンポーネントは、初めて表示するまでコードを読み込みません。コード分割で、アプリの最初の読み込みを軽くしたいときに使えます。読み込み中の表示の出し方、default以外のexportの読み込み方、先に読み込みを始める方 ...

React 19では、refのコールバックから関数を返すと、要素が外れるときにReactがそれを呼びます。React 18と並べて、呼ばれる順番を確かめ、Mapで要素を管理する例やTypeScriptの型エラーの直し方もまとめました。 ...

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

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

React 19では、ページの部品の中に書いたtitle・meta・linkを、Reactがheadへ移してくれます。SEOのために、検索結果に出るタイトルや説明文をページごとに書き分けたいときに使えます。ページの切り替え、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 で描画す ...