What does the hook numbers in the Reactjs Dev tool correspond to?
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?
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
- Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'toString') Apexcharts React
- Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks
- Need to store JSX in React state
- Input regex for UK postcodes constantly invalid
- React hooks using recharts AreaChart Console Warning
- Tailwind error when installing shadcn in Vite React App
- Can Shadcn ui be installed for Vite + React with javascript and not typescript?
- How can I control dagre layout to position nodes in a top-to-bottom tree with True branches on the left and False branches on the right?
- React-Toastify is not displaying properly
- React-query setQueryData not re-rendering component
- State is not updated in StrictMode
- Check if React component is empty or has no child component
- How to utilise useContext within a seperate function - ReactJS
- Relative Routing in Next JS
- useSpring weird behaviour when undoing transform back to zero
- Is it bad practice to make useEffect respond to an user action like this?
- NextJS Middleware causing "localhost redirected you too many times" error
- Spreading props with conditional props after omitting
- React Native: What is the use of SafeAreaProvider
- Module not found: Can't resolve 'swiper/react'
- useSearchParams() causes 500 error when page is client side
- React Native Ios Error - ENOENT: no such file or directory, uv_cwd (null))
- How to run npm start without opening browser for react development on linux
- Programmatically open Tooltip in Material-UI
- Why is the Payload Null in My Redux Action?
- How to assign refs created from useRef to child components in React Typescript?
- Cors and React with no local server
- What is the reason ESlint doesn't work in VS Code
- react-select: How do I resolve “Warning: Prop `id` did not match”
- error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s)