Search code examples
javascriptreactjsprofilerreact-devtools

what does mean this number in react devTools?


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

Im using the react dev tool profiler in chrome

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:

Why did this render?
- Hooks 1,7 and 15 changed

This part of the dev tool is not interactive, and I cant 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?


Solution

  • This is answered in this StackOverflow Post: What does the hook numbers in the Reactjs Dev tool correspond to?

    As per this React Pull request, the numbers correspond to those shown in the Components tab: Components Tab