React の Suspense の fallback に、読み込み後と同じ形のスケルトンを渡す方法です。帯の高さを文字の行に合わせて下の段落を動かさない作り、文章の行数の決め方、読み上げと動きを減らす設定への配慮を、Chromium ...

Suspenseを入れ子にすると、届いた部分から順に画面に出せます。外側と内側で表示が切り替わる順番、内側の取得が遅れる置き方とその直し方、300ミリ秒以内に届いた部分がまとめて出る動きを、Chromiumで計測して確かめました。

react-dom の preload はファイルを先にダウンロードするだけで、preinit は実行や適用まで進めます。head に入る要素、precedence の順番、クリックで読み込みを始める効果、サーバーでの出力を確かめまし ...

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

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

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

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

React 19のuseなら、Promiseとコンテキストを描画中に読めます。待ち時間はSuspense、失敗はError Boundaryに任せられ、コンテキストはifのあとでも読めます。キャッシュしないPromiseを渡すとどうな ...