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 ...

送信中・エラー・送信済みのように、いっしょに変わるstateをuseStateで別々に持つと、1つ更新し忘れて、ありえない表示が出ることがあります。useReducerで更新を1つの関数にまとめる書き方と、型やテストでの確かめ方、つま ...

コンポーネントからカスタムフックを切り出し、React Testing Library の renderHook でテストする手順です。result.current の読み方、act、引数を変える rerender、unmount、P ...

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