A Work in Progress

developer's blog by Wei
lots of work in progress notes
TimelineCredits

First Look on React DevTools v4

September 21, 2019

Profiling performance with React DevTools

Last week, I've played around and compared two ways of building pages with a Layout component. Namely, Layout outside router and Layout within each page.

This week, I experimented again and learned that although rendering Layout at each page makes implementation more straightforward, results in fewer re-renderings, but the other way around (context + child set parent state) may produce smaller re-renderings and may actually be more efficient. This is now only an observation, not a time to have any conclusions.

Although, the exploration around the React DevTools is interesting. It is not only useful for debugging but also helpful for understanding rendering. Here are some quick notes:

DevTools basic usage

the waterfall looks like this

  • greyed out are not re-rendered (can build a nice demo with React.memo that greys out children elements while parent re-renders)
  • clicking on a row would flush everything before to the beginning of the frame
  • grouped by "commits"
  • rows segmented with information of its children re-rendering (was helpful in figuring out how a portal container did not get rendered when the other sub-tree has a component that tries to render into the portal container)
  • DevTools 4.1 is released

Profiler API

On the side, one thing I observe from Jinjiang this week is that it is worth it to spend time to deal with, say, build step, as a whole, with a dedicated time. I feel my exploration around rendering has been here and there, and it wasn't as efficient. Gonna learn this and dedicate a study into this to produce some useful results.