​​React

Thumbnail of post image 042

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

​​React

Thumbnail of post image 020

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

​​React

Thumbnail of post image 048

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