自作の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 ...

使わないpropsを受け取って下へ渡すだけのコンポーネントは、childrenで中身を受け取る形にすると、バケツリレーから外せます。propsを足したときに直す場所の数と、外側のstateが変わったときの描画回数を、TypeScrip ...

zodのスキーマを1つ書き、zodResolverでreact-hook-formにつなぐと、入力の検証とフォームの値の型が同じスキーマから決まります。バリデーションのルールと型を別々に書きたくないときに使えます。型で防げる書き間違い ...

useEffectの依存配列を書き忘れたり、描画のたびに作るオブジェクトを入れたりすると、エフェクトが止まらなくなります。逆に値を入れ忘れると、古い値のまま動きます。4つの間違いをChromiumで動かし、直し方とESLintの警告を ...

useEffectでfetchすると、検索語を速く打ち替えたときに古い応答が後から届き、表示を上書きすることがあります。片付け関数でAbortControllerのabort()を呼ぶと、古いリクエストが中止され、入力どおりの結果が残 ...