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で描き、出たエラーを並べて比べました。

子の入力欄の DOM を ref でそのまま親に渡すと、親は値の書き換えまでできてしまい、子の state と画面がずれます。useImperativeHandle で focus と clear だけを見せる方法と、見せていない操作 ...

useLayoutEffectは、ブラウザが画面を描く前に動きます。高さを測って位置を決めるツールチップを両方のフックで作り、Chromiumで描かれたフレームを記録して、useEffectでだけ出たちらつきと、その防ぎ方を紹介します ...

入力欄の部品で id を決め打ちにすると、同じ部品を2つ置いたときに id が重なり、2つ目のラベルを押しても1つ目の入力欄にフォーカスが移ります。useId で部品ごとに id を作り、ラベルや説明文と結びつける書き方と、数を数えて ...

createPortalを使うと、コンポーネントの中で開いたモーダルを、DOMの上ではdocument.bodyの直下に描画できます。親のCSSでダイアログが切れる例と、ポータルの中のクリックが親に届き、親のコンテキストがポータルの中 ...

useStateの値を変えるとコンポーネントは描画し直されますが、useRefの値を変えても描画は起きません。クリックの回数とタイマーのIDを例に、描画の回数を数えて違いを確かめ、画面に出す値はuseState、出さない値はuseRe ...