Menu
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?
842
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks are backwards-compatible.
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.
Before React Hooks (React < 16.8), developer's were required to write class components in order to take advantage of certain React Features. But now, React Hooks provides a more ergonomic way to build components because we can use stateful logic without changing our component hierarchy. It is the most important and often used hook.
Rewrite the above code using React hooks. One can update the value of a state variable just by passing the new value to update function or by passing a callback function. Second technique which accepts a callback function is safe to use. Here we have class component that updates the state using the input from a form.
You’ve likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations “side effects” (or “effects” for short) because they can affect other components and can’t be done during rendering. The Effect Hook, useEffect, adds the ability to perform side effects from a function component.
(We don’t recommend rewriting your existing components overnight but you can start using Hooks in the new ones if you’d like.) React provides a few built-in Hooks like useState. You can also create your own Hooks to reuse stateful behavior between different components.
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
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
