21

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).

Adonis K. Kakoulidis
  • 4,951
  • 6
  • 34
  • 43

1 Answers1

30

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).

bvaughn
  • 13,300
  • 45
  • 46
  • 3
    You are awesome Brian! Sorry for mentioning explicitly on the tweet, did it because (I falsely thought that) you are one of the main contributors of react-devtools. – Adonis K. Kakoulidis Aug 02 '18 at 14:59
  • 3
    No problem! I am one of the main contributors at this point. I've just never worked with that particular feature. – bvaughn Aug 02 '18 at 18:02