DevTools: Profiler: Show which hooks changed
# "Can you show which hooks changed?" ...is a question I've heard a couple of times with regard to the new Profiler change-tracking feature. This request is certainly understandable, but it presents a couple of challenges: 1. Identifying which hooks values change would requires shallowly re-rendering each function component. 2. Identifying a hook in a non-ambiguous way requires displaying the full hooks tree structure, since hooks aren't named. (Alternately we could support named hooks, #16474) Let's take each of a look at each of these below. ## 1 - Identifying which hooks values change One of the challenge for DevTools when it comes to hooks is identifying custom hooks. Sebastian's [proposed solution](https://github.com/bvaughn/react-devtools-experimental/blob/master/src/backend/ReactDebugHooks.js) is that DevTools temporarily overrides React's hooks dispatcher while it shallowly re-renders the component. During the re-render, each time one of the built-in hooks is used, our override implementation parses the stack to identify "custom hooks" (functions higher up in the callstack that begin with "use"). After render is completed, we reassemble this information into a tree structure which DevTools can display. Currently we only do this shallow render when a component is [inspected](https://github.com/bvaughn/react-devtools-experimental/blob/master/OVERVIEW.md#inspecting-an-element), but in order for us to track which hooks have changed while profiling, we would need to
Posted by bvaughn on Aug 19, 2019, 9:56 PM
Tags
Related issues
- The only thing keeping me on VSCode these days is the remote SSH development.
- Something similar was done in a sheep model: "A bioactive supramolecular and covalent polymer scaffold for cartilage repair in a sheep m...
- Proposal for OpenHarmony Adaptation of [ ThreadPool ]
- Proposal for a pipe-like operator to chain constructor/method invocations without nesting
- Implement support for Node Stashing
- RSC and CDN interaction makes next.js inefficient for highload projects
Raise real-world problems, find people facing the same issue, and discuss solutions.3,500 issues0 comments
support (E-commerce)
The only thing keeping me on VSCode these days is the remote SSH development.
Something similar was done in a sheep model: "A bioactive supramolecular and covalent polymer scaffold for cartilage repair in a sheep m...
Proposal for OpenHarmony Adaptation of [ ThreadPool ]
Proposal for a pipe-like operator to chain constructor/method invocations without nesting
Implement support for Node Stashing
RSC and CDN interaction makes next.js inefficient for highload projects
Extract Action Notifier framework for push notifications
Improve support for monorepo by supporting git options such as depth, and sparse checkout
DevTools: Profiler: Show which hooks changed
# "Can you show which hooks changed?" ...is a question I've heard a couple of times with regard to the new Profiler change-tracking feature. This request is certainly understandable, but it presents a couple of challenges: 1. Identifying which hooks values change would requires shallowly re-rendering each function component. 2. Identifying a hook in a non-ambiguous way requires displaying the full hooks tree structure, since hooks aren't named. (Alternately we could support named hooks, #16474) Let's take each of a look at each of these below. ## 1 - Identifying which hooks values change One of the challenge for DevTools when it comes to hooks is identifying custom hooks. Sebastian's [proposed solution](https://github.com/bvaughn/react-devtools-experimental/blob/master/src/backend/ReactDebugHooks.js) is that DevTools temporarily overrides React's hooks dispatcher while it shallowly re-renders the component. During the re-render, each time one of the built-in hooks is used, our override implementation parses the stack to identify "custom hooks" (functions higher up in the callstack that begin with "use"). After render is completed, we reassemble this information into a tree structure which DevTools can display. Currently we only do this shallow render when a component is [inspected](https://github.com/bvaughn/react-devtools-experimental/blob/master/OVERVIEW.md#inspecting-an-element), but in order for us to track which hooks have changed while profiling, we would need to
Comments (0)
No comments yet. Start the discussion.