highlight changes in chrome

When React Dev Tools v4 landed the feature to highlight updated components disappeared.

It’s true that focusing only on re-renders can be inappropriate as Dan Abramov explains on Reddit:

[Highlight Updates] contributes to the wrong idea that re-renders by themselves are bad (they’re not if they’re cheap). So people spend time optimizing useless things and missing actual performance issues.

None the less - it can be useful to quickly check whether components are rendering as expected.

In looking for an alternative, I discovered that the Chrome dev tools actually have a very similar feature (albeit not React specific) as part of their performance analyzing suite.

Quick steps to use turn it on:

1. Open your dev tools (⌥ Alt + ⌘ Cmd + I)

2. Open the Command Palette (⌘ Cmd + ⇧ Shift+P) in the dev tools.

   

3. Turn on “Show Rendering”

   

4. Select the options you want

   

5. Update the page and watch it paint live.

(Update Highlights were brought back in React Dev Tools v4.2. Woohoo!🎉)