/* Code-Comments */

December 26, 2019

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:

command palette

  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”

rendering options

  1. Select the options you want

rendering in action

  1. Update the page and watch it paint live.

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

Stephen Weiss

Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!