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に分けると、関係するコンポーネントだけが描き直されること ...

React 19では、ページの部品の中に書いたtitle・meta・linkを、Reactがheadへ移してくれます。ページの切り替え、index.htmlに最初からあるtitleとの関係、2か所で書いたとき、空のタイトルになる書き方 ...

入力のたびに重い一覧を描き直すと、文字が出るまで待たされます。useDeferredValueで一覧に渡す値を遅らせ、一覧をmemoで包むと、入力欄はすぐに更新されます。memoがないと効かないことも、ブラウザで測って確かめました。

React 19のuseFormStatusを使うと、フォームの中に置いたボタンの部品が、propsなしで送信中かどうかを読めます。使い回せる送信ボタンを作り、押したボタンの見分け方や、pendingがtrueにならない置き方を確かめ ...

React Compilerは、フォルダの指定、”use memo”を付けた関数だけの変換、実行時のフラグでの切り替え、の3つの方法で少しずつ入れられます。Vite 8で3つとも試し、Babelの設定の落とし穴 ...