React Routerのデータモードでは、ルートにloaderを書くと、画面を描画する前にデータを読み込めます。useLoaderDataでの受け取り方と型の付け方、入れ子のルートの読み込みの順番、読み込み中の表示、エラーと中止の扱 ...

dangerouslySetInnerHTMLは、Reactのエスケープを通さずにHTMLをそのまま入れます。利用者が入力した文字列を渡すと、埋め込まれたコードがページと同じ権限で動きます。どんな書き方で仕込んだコードが動き、DOMP ...

Zustandなら、createで作ったフックを呼ぶだけで、Providerなしに状態をコンポーネント間で共有できます。TypeScriptでの書き方、セレクターと再描画の関係、無限ループになる書き方、set のマージの範囲を、検証環 ...

一覧や選択の部品を、どんなデータにも型が付いたまま使い回すには、propsの型に型引数Tを付けます。Tがどこで決まるか、型チェックで止まる間違い、アロー関数とrefでの注意点を、TypeScriptで確かめました。

自作のButtonにbuttonと同じpropsをすべて受け取らせるには、型をComponentPropsから作ります。classNameのつなげ方、Omitで型を変える方法、型チェックで止まる間違いを、TypeScriptで確かめま ...

MSWを使うと、fetchを書き換えずに、APIの答えをテストごとに差し替えられます。MSW 3.0とVitestで、一覧の表示、500やネットワークエラー、1回目だけの失敗、追加の送信をテストし、上書きを戻し忘れたときの失敗も確かめ ...

入力のたびに約200ミリ秒かかる計算を描画の中で呼ぶと、入力欄が止まります。計算を Web Worker に移すと入力欄は止まりません。Worker を1つ使い回すと結果が遅れることも確かめ、入力のたびに作り直して古い計算を止める書き ...

一覧の最後に目印の要素を置き、IntersectionObserver で見張ると、目印が見えたときに次のページを読み込めます。React の useEffect での書き方を確かめ、見張りを1回だけ作る書き方で起きる2つの失敗も調べ ...

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

1万件の一覧を map でそのまま描くと、DOM に1万行ができます。react-window の List を使うと、見えている行とその前後だけを描きます。2.5.0 で書き方を確かめ、DOM の行の数と描画の時間を比べ、うまく動か ...