Bar widths of flame graph in react profiler

user_3963067 0
Viewed 139

I was looking at react profiler which seems a really nice tool. Have a look at these two screens:

enter image description here

and

enter image description here

What confuses me is following. Look at the width of the div from first screenshot on which the left top corner of the tooltip starts (which says in total that component took 17.7 ms to render), now look at width of the Row on second screenshot (tooltip of which says in total that component took 12.9 ms to render). Why is the width of Row larger than the width of div left to it? When div in total took more time to render? According to the docs, should not it be other way around? Am I missing something?

reactjs
1 Answers

Each bar in the flame graph needs to be wide enough to contain all of its children- even the ones that weren't even rendered in the current commit (the gray subtree starting with TextField in your screenshot above). that's why Row is wider than div. The width of each node gives you some idea of what the overall cost of that subtree would be if it were all to be rendered. In this case, and most cases, color is the more important bit of information.

This note in the React Profiler docs mentions the distinction between color and width:

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.

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.

The key part of the note about is "when they last rendered".

Hope this helps clear up the confusion.

user_11238050
Related