ykokw.xyz blog logo

Blog Posts

No results for 'undefined'Powered by Algolia

Introducing the React Profiler – React Blog


  • commit: DOMノードへの変更が発生してライフサイクルイベントが発生するとき

    • 黄色くて高いバーのcommitが時間がかかっているところ

Flame chart

The width of a bar indicates how long it took to render the component (and its children) when they last rendered. If the component did not re-render as part of this commit, the time represents a previous render. The wider a component is, the longer it took to render.

  • Flame chartのグラフ横幅は前回レンダリングされたときにかかった時間ベースの幅

    • 選択中のcommitで再レンダリングされていなくても、直近でレンダリングされたときの結果が表示されている(多分

The color of a bar indicates how long the component (and its children) took to render in the selected commit. Yellow components took more time, blue components took less time, and gray components did not render at all during this commit.

  • 選択されたcommit内で黄色くなっているところが、レンダリングに時間がかかっているところ
  • Flame chartの右パネルはpropsとstateが表示されてる

    • 上側に total renders: って表示されてるところが、何回レンダリングされたのかも表していそう
    • props / stateを見ながらcommitを切り替えると、なぜレンダリングされたのかも把握できたりする
    • そこをmemorizeすると、レンダリング減らせるかも...?

This content is built with Gatsby