Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Analyze React components with MobX-React devtools

    Michel WeststrateMichel Weststrate

    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.

    reactReact
    15 - 16
    mobxMobX
    2 - 5
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss