4

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

praveen guda
  • 97
  • 2
  • 10
  • Does this answer your question? [What does the hook numbers in the Reactjs Dev tool correspond to?](https://stackoverflow.com/questions/68925790/what-does-the-hook-numbers-in-the-reactjs-dev-tool-correspond-to) – Raine Revere Aug 10 '22 at 15:16

1 Answers1

4

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

Raine Revere
  • 30,985
  • 5
  • 40
  • 52
Jason
  • 64
  • 2
  • Thank you! This is the exact right answer. To make things even easier you can also search any instance of that component, you don't need to scroll through the whole tree. – Gabe Rogan Jan 06 '23 at 21:45