ReactのProfilerで描画にかかる時間を測る方法
Reactので囲んだ部分の描画が確定するたびにonRenderが呼ばれ、かかった時間を受け取れます。memoが効いているかの見分け方、複数のProfilerの置き方、本番用のビルドで測るときの注意を、Chromiumで確かめました。
ReactのContextを分けて余計な再描画を減らす方法
1つのContextに何でも入れると、どれか1つの値が変わるたびに、そのContextを読むすべてのコンポーネントが描き直されます。変わるタイミングが違う値を別々のContextに分けると、関係するコンポーネントだけが描き直されること ...
useDeferredValueで重い一覧による入力の遅れを防ぐ方法
入力のたびに重い一覧を描き直すと、文字が出るまで待たされます。useDeferredValueで一覧に渡す値を遅らせ、一覧をmemoで包むと、入力欄はすぐに更新されます。memoがないと効かないことも、ブラウザで測って確かめました。
