Reactのパフォーマンス改善メモ

パフォーマンスを調べる。

  1. React-Developer-Toolsをインストール
  2. GoogleDevToolsでProfilerを開く
    1. renderされた場所をハイライトしたいときは、設定で「Highlight updates when components render.」をONに
  3. プロファイルを実行

プロダクションでプロファイルしたいとき

Build時にオプションをつける
https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977

所有者限定モードのためこのボードには投稿できません ボードとは?

特定のコンポーネントだけが必要としているパラメーターをバケツリレーしてた結果、無駄にrenderが走っていた+プロパティの管理が大変になっていたので、useContextを使って直接やりとりさせるようにした。

スライド1.jpeg