First Look on React DevTools v4


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

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.