bvaughn/react-devtools-experimental

Parents that didn't rerender should be gray in Profiler

sebmarkbage opened this issue · 4 comments

In the old profiler, when a deep setState caused a commit, all the parents of that update would be gray. Distinct from the green 0ms rerenders.

I found that to be incredibly helpful in showing what caused a render since it quickly highlights where the setStates actually happened which is often actionable.

In the new profiler, parents seem to show up the same as 0ms rerenders (green) so I've lost this feature. They should be grey.

However, while playing in the new profiler, I realized that this "bug" actually had another effect. It highlights which child might have a deep rerender in it and which don't. This is a helpful guidance to know which child to click to zoom in on that tree. This is very helpful in the case that the deep rerenders are very small and don't show up until you zoom in.

Therefore, I'd like to suggest that maybe a parent of rerenders (where the parent itself didn't rerender) should be a darker gray than the lighter gray of a parent that didn't rerender and no children rerendered neither.

That way we get the best of both worlds:

  1. I can quickly tell which is the root setState of the rerender by a glance. (Look for the green.)
  2. If I can't see it, I can quickly tell which subtree I should zoom into to find more. (Look for the dark gray.)

In the old profiler, when a deep setState caused a commit, all the parents of that update would be gray. Distinct from the green 0ms rerenders.

As of ee09912, the new Profiler's behavior should match the old one.

Need to think about your second request. Initially a bit wary of adding more color combinations to the Profiler. For example:
Kapture 2019-05-15 at 12 56 46

  1. I can quickly tell which is the root setState of the rerender by a glance. (Look for the green.)

This sounds related to PR #269

Maybe I can use a pattern here, rather than overload the colors even more, e.g.
Screen Shot 2019-05-15 at 2 00 27 PM
Screen Shot 2019-05-15 at 2 00 37 PM

Resolved via f10a6b3