[React DevTools] Component Stacks for Timeline Profiler

[lunaruan]

In the Timeline Profiler, we currently denote each state update with a dot. If you hover on the state update, you get some information about it, such as which component caused the update, the lane the update was rendered at, and the time that the update happened. This is useful for unique components. However, for components (ex. library components) that are used in multiple places, just having the component name is less helpful.

It would be most useful to get a stack of component owners (like in the rendered by section in the Components tab). However, we only have owner metadata in DEV mode, and it usually only makes sense to profile in production. The next best thing we can do, then, is to get all the parent components and create a stack out of that (ie the return path of the fiber rather than the owner path).

We want to add component stacks so that we also know which parent(s) caused the update. For this task, a potential solution is:

• When a state update happens, walk the fiber's return path and save all the component names and their source. (See markStateUpdateScheduled for code pointers on where to put this)
• After we're done profiling, process the stack so that we create a stack of return fibers
• Pass the stack to the DevTools front end and add the component stacks to the UI when a user hovers over a state update

[blakef]

I've got some basic styling that is good enough. One thing that might come up is I'm passing on a maximum of 5 (hardcoded) components along the return path. The concern is that the return path can get very long, and I'm not sure it's all that useful.

The constraints are:

• the size of the tooltip, and
• performance impact of traversing when recording (no data to back this up).

I'm not sure what the number should be, but 5 seemed enough to get more context about which component caused the update.