Understanding React Dev Tools Profiler results

Question

I'm profiling a react native app and I'm struggling to understand the outcome data. In the screenshot below, you can see the list of components that have been rendered at a specific commit, 12.6s. You can also see that the render duration took 556.5ms. What's confusing me is that if you add up the duration of each component listed, it will be nowhere near 556.5ms.

If I have a look at the Ranked chart instead, I can see that the component that took the longest to render is the Context.Consumer which only took 4.8ms. The more you scroll down this chart, the less time it will take the components to render.

I can't see how these components' render time would amount to 556.5ms.

Can someone please explain?

I'm trying to locate the component that's slowing down the app render duration.

Answer 1

Updated (CORRECTED) Answer

When you do something in your application, React can do several things, for example fetching data, changing state, executing hooks, side effects, updating the virtual dom and rendering, in two distinct phases, the render phase and the commit phase, sequentially. In any case, each update to the aplication is confusily called a "commit". Multiple commits can happen with just a single button press of your app or loading a page. In the screenshots you provided, you can see in the top right bar that you recored 17 commits, of each you were looking at specifically the 5th one (thats the 5/17 there).

In the flamegraph you see the total rendering time of each component in a hierarchical / structural manner (including its children) with two values, the first number is the individual render time of that component and the second the render time together with its children. , but in the ranked chart you see they organized differently by the bigger to smaller render times.

If you click on the cogs on the top right, select the profiler tab, you can select the option "Record why each component rendered whiled profiling", then when you click on a component you will be able to see on the right, together with the commit information, "Why did this render?" and it will show things like "state updated". With this you can further narrow down the location of your perfomance reasons.

So with the both the flamegraph and the ranked chart you can get quite precisely the component location of the performance issue or why did it rendered, so you can go there, look at your code and think on how could you speed it up or avoid a rerender.

P.S: The docs For React Dev Tools is a little bit missing, so I'm not sure is a version issue, but I also want to point out that there is another tab, Timeline, that is not present in your screenshot, maybe you have an old version? I searched for when the Timeline was introduced but I didnt find this info neither on the old or the new docs. Anyway, If you are able to update it and you can see the Timeline tab, you can also zoom to a particular render moment in your application and get more detailed information on the time of execution of more specific things, like hooks.