What does the hook numbers in the Reactjs Dev tool correspond to?

Question

I have a react.js app that I want to profile for performance issues.

I'm using the react dev tool profiler in firefox.

I profile a specific interaction and get the flamegraph and the ranked time graph in the dev tool.

Then this message shows up in the dev tool:

This part of the dev tool is not interactive, and I can't find anything on how the hooks are numbered.

How do I interpret these numbers? What do they correspond to? Where can I find the information on what hooks they refer to?

For

Answer 1

This is the PR where they added that feat. They didn't provide a better UI due to some performance constraints. But you can find what hooks those indexes correspond to if you go to the components tab in dev tools and inspect said component; in the hooks section, you'll have a tree of the called hooks, and for each hook, a small number at the left which is the index. You'll probably need to unfold the tree of hooks to find them.

Here's a screenshot from the linked PR

Hydrozoan

See also issue #16477 Profiler: Show which hooks changed for more insights – Tor

When it says "Reducer: 12" for example, how do I find out what reducer 12 is? – Made

I just want to say thank you for this answer. Helped me solve a nasty re-render issue. – Felicafelicdad

I tried to follow this advice… unfortunately the hook does not exist, I’m supposed to search for hook 18 but the maximum hook is 15, even after unfolding everything… I created a question here #76313795 – Viand

But how would one search for hook indexes in the dev tools? – Katinka

Thanks for this. I am unable to find my hook though as the highest number is 82, but it says my hook number 85 changed. – Boulder