reactjsperformancereact-hooksprofilerflamegraph

How to find out which hook has changed with the help of hook number/index displayed in FlameGraph


I'm working on a react application and want to improve the performance. I was using the Profiler to see the components painted on each render and also FlameGraph to find out which one is taking long time.

In the Flamegraph it shows the detailed information about when and why the component is rendered, in that it has this Why did this render? section and shows that some hooks have changed. But this doesn't show me the hook name instead shows me a number/index of a hook. How are the hooks numbered? and how to know the exact hook name with the help of these number/index. Rendered component information in Flamegraph


Solution

  • If you check the "Components" React Dev Tools tab (to the left of Profile) you can find the component in question and see the numbered hooks. I believe that is the correct relation.

    sample image