In react-devtools, what do the various highlighting colors of the "highlightUpdates" option mean

Question

I've been using the react-devtools to detect any unnecessary component updates, however I'm not sure I fully understand how it works.

I can identify the various components that got updated by the added borders indicating that they got updated but I'm not sure what the various colors of those borders mean (I've so far seen cyan and light green colors).

Answer 1

I'm not familiar with this either, but I'll trace through the code! :)

This is the component that renders the "Highlight Updates" toggle. It calls a changeTraceUpdates method in the main Store which sends a message through the "bridge" to activate the TraceUpdatesBackendManager. Poking around that file, we see a couple of classes with names like "presenter" in them; I assume one of these is what actually draws the border. In particular, TraceUpdatesWebNodePresenter looks related because it defines an array of COLORS. It looks like these colors are chosen based on a "hit" attribute, which a quick search suggests is set by TraceUpdatesAbstractNodePresenter– and gets incremented each time an element is "presented".

Reading between the lines then, I assume this means that components that render less frequently will be outlined with "cool" colors (blue) and ones that render more frequently will be outlined with "hot" colors (red).