親が描き直されるたびに一緒に描き直される子は、memoで包むと、propsが前と同じあいだは描き直されなくなります。その場で書いたオブジェクトや関数を渡すと効かなくなる理由とその直し方、JSXのchildrenでも効かなくなることを、 ...

使わないpropsを受け取って下へ渡すだけのコンポーネントは、childrenで中身を受け取る形にすると、バケツリレーから外せます。propsを足したときに直す場所の数と、外側のstateが変わったときの描画回数を、TypeScrip ...

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

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

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