Repository: react
Issue: DevTools: Profiling tool improvements umbrella
Labels: Type: Discussion,Component: Developer Tools,Type: Umbrella

I met with @lahmatiy this afternoon to chat about his project [react-render-tracker](https://github.com/lahmatiy/react-render-tracker). Here are a few pain points mentioned during the meeting:
* Not clear when a component/tree is unmounted/remounted.
* DevTools typically displays data for a component in current update (e.g. the latest) but doesn't represent changes over time.
* It isn't always clear why something updates (e.g. why did context change higher up, what was the flow of props/state above that resulted in a new prop)
* It's difficult to detect when effects re-run unexpectedly due to dependency problems. (Nothing really reports this.)

This is an umbrella issue for some ideas I wrote down during the discussion that might be good additions to the React DevTools/Profiler. The items listed below may be worked on independently– and some may turn out to be not worth doing (but they seem worth discussing and considering).

## Legacy profiler

### Track changed values
The Profiler currently has an opt-in setting for detecting _why_ something re-rendered, but all this does is show the name of the state/prop that changed. Should we also add a setting to display the changed value?

We shied away from doing this for a long time because:
* We didn't want to incur the cost of serializing deep object structures during a profiling session.
* Without eagerly serializing an object, we don't have a solution for mutable values. (We can't serialize these later since they may have changed.)

Maybe there are some ways to address the above concerns though? For instance, we could reduce the amount of data we needed to eagerly serialize by:
* Only serialize values that _changed_ between renders. (This would avoid the mutable object scenario.)
* Only serialize _parts_ of an object that changed. (See [here](https://github.com/lahmatiy/react-render-tracker/blob/39d598aaa12274cb8a015dacf55b68687bde7d8d/src/publisher/react-integration/devtools-hook-handlers.ts#L356-L374) for possible precedent.)

Perhaps this, combined with making the setting opt-in, would enable us to add this feature.

### Explicitly display unmounts
The DevTools profiler only displays components that were _committed_ (e.g. visible on the screen at the point in time when work was committed), but React also spends time unmounting components– and perhaps an unmount isn't expected in some cases (e.g. when a wrapper object is added and React deeply unmounts and remounts a tree).

Should we show some sort of rollup (e.g. at the commit level) for components that were un-mounted too? This way they wouldn't be invisible an easy to overlook.

### Viewing changes for a subtree across time
The Components tab allows you to explore the entire application tree, or double-click to drill into what we call the ["owners tree"](https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md#owners-tree)– the list of things rendered by a particular component (the things it "owns").

Maybe the Profiler could provide a similar method to drill into a component (e.g. double-clicking it) to then provide a snapshot of how that component changed over time? This might make it easier to discover things like unmounts/remounts within a known scope. (Or maybe we could also show other component-level summary stats when in this mode?)

## Scheduling profiler

### Explicit unmount/mount markers
Should we add component un-mounts/mounts as explicit marks in the new profiler? Profiling tools currently focus on the time spent _rendering_ (or perhaps mounting) a component, but unmounts are somewhat hidden. (Perhaps more importantly, unexpected _remounts_ are not highlighted enough.)