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()を呼ぶと、古いリクエストが中止され、入力どおりの結果が残 ...

React 18以降のcreateRootでは、setTimeoutやPromiseの中で続けて呼んだstateの更新も、1回の描画にまとめられます。React 17・18・19で描画の回数を数え、まとめられない書き方も確かめました。 ...

Reactでstateを更新した直後の行では、画面（DOM）はまだ古いままです。flushSyncで包むと、次の行に進む前に画面が更新されます。スクロールと印刷の例で確かめ、エフェクトの中で呼んだときの警告と描画の回数も調べました。

StrictModeで包むと、開発中だけ一部の関数が2回呼ばれます。コンポーネントの本体やuseStateの初期化関数、reducer、マウント時のエフェクトなどは2回で、イベントハンドラは1回でした。一部だけ包んだときや本番用のビル ...

Reactの入力欄には、valueとonChangeで値をstateに持たせる「制御する」書き方と、defaultValueで初期値だけを渡す「制御しない」書き方があります。描画の回数や初期値の変更、リセットボタンの効き方を比べ、使い ...

React 19では、サーバーのHTMLとブラウザの描画が食い違うと、エラーが1件にまとまり、どの部品のどの値が違うかが差分で出ます。同じ食い違いをReact 18と19で描き、出たエラーを並べて比べました。