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で確かめました。

lazyで包んだコンポーネントは、最初に表示するときまでコードを読み込みません。Suspenseで読み込み中の表示を出す書き方、default以外のexportの読み込み方、先に読み込みを始める方法、読み込みに失敗したときの動きを確か ...

React 19では、refのコールバックから関数を返すと、要素が外れるときにReactがそれを呼びます。React 18と並べて、呼ばれる順番を確かめ、Mapで要素を管理する例やTypeScriptの型エラーの直し方もまとめました。 ...

描画中にエラーが出ると、Reactは画面をすべて消します。Error Boundaryで包むと、その部分だけを代わりの表示に差し替えられます。受け止められるエラーとそうでないエラー、イベントハンドラーのエラーを渡す方法、表示し直す方法 ...

1つのContextに何でも入れると、どれか1つの値が変わるたびに、そのContextを読むすべてのコンポーネントが描き直されます。変わるタイミングが違う値を別々のContextに分けると、関係するコンポーネントだけが描き直されること ...