子の入力欄の 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 の順番、クリックで読み込みを始める効果、サーバーでの出力を確かめまし ...

Reactは、同じ場所に描画されたコンポーネントのstateを引き継ぎます。keyに相手のIDなどを渡すと、値が変わったときにコンポーネントを作り直し、子のstateまで初めに戻せます。エフェクトで空にする書き方との違いや、keyに使 ...

Reactので囲んだ部分の描画が確定するたびにonRenderが呼ばれ、かかった時間を受け取れます。memoが効いているかの見分け方、複数のProfilerの置き方、本番用のビルドで測るときの注意を、Chromiumで確かめました。