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:

• overview explains the design implementation of devtools
• 👆 is also a nice statement of why and how to rewrite the devtools, explaining mainly the motivation and how to solve the problem, with a little overview to existing implementation for necessary understanding
• deep dive video
• debug like an ninja (article)
• profiler (tab) documentation / instruction

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

• only enabled for development build (may opt-in for production build)
• rfc
• React's 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.