Analyze React components with MobX-React devtools
The MobX React devtools can be used to analyze when and why React components are re-rendered. They offer three features: 1) visualize when components re-render, 2) show the dependency tree of a component, to see which data it's rendering depends upon, and 3) log in detail which data is changed by your actions, and how these changes propagate through the application.
[00:00] Before we continue, I want to introduce you first to the MobX React DevTools. These tools are a very valuable asset to analyze what MobX is doing. We'll use them throughout the course, so let's use them.
[00:12] In a real project, you can import them as devtools from the MobX React DevTools package. In this gs.bin, however, we have loaded them as UMD module so we can import them from the global scope. The only thing we need to do after importing them is to inject them somewhere in our component tree.
[00:30] There they are. We have this new toolbar, which introduces three tiny buttons. The first one, if enabled, makes sure that MobX shows all the renderings that are happening on the screen per components. For example, if you press a button, this component is rerendered, and we can see how often it has been rendered and how long it took to render this component.
[00:51] The second button can be used to analyze when a component will rerender. We now have the selection mode, and we can click components. We get a report about which observables are being observed by this component. Our counter component observes one field, which is the count fields of the first observable object we have created.
[01:13] Finally, there is this button that enables extensive logging about everything that happens in MobX. If we open the browser's console, and we enable the log, and we press the buttons, we see exactly what happens. Our count has been updated from four to five. Based on that, MobX has determined that our counter component needs to rerender, which happens after that.
[01:30] These are the MobX DevTools. Use them to your advantage.