December 26, 2019
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:
⌥ Alt + ⌘ Cmd + I)
⌘ Cmd + ⇧ Shift+P) in the dev tools.
(Update Highlights were brought back in React Dev Tools v4.2. Woohoo!🎉)
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!