Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Optimize Performance in a React App with MobX @computed Properties

    Basarat Ali SyedBasarat Ali Syed
    reactReact
    mobxMobX
    typescriptTypeScript

    MobX provides a neat little @computed decorator to exploit the I know when you change nature of observables for performance, fun and profit.

    In this lesson we look at an example use case for @computed getters and their performance advantages.

    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
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: We kick off with the simple MobX React typescript application. We have Hello Data that contains a simple observable and an action. We have a simple Hello Observer component that uses this data and the render method.

    We render this component to the application root. When we click the button, an increment of the MobX observable causes the Hello component to re-render with the new count.

    Now, let's say we want to show additional UI based on whether the button has been clicked at least once or not. We can do it easily with a simple conditional check and showing a div if the condition is met. Now, as we click the button, this new div shows up.

    Since this condition is derived from the click count member of the data class, we can move it into a nice getter with the semantic name into the data class that will help future maintenance of that class understand the data flow a bit better.

    As we go and click the button, you can see the application still functions as expected. For these simple getters that can be derived from observables, MobX provides the computed decorator which does not change the observed behavior of an application.

    If we go ahead and click the button, you can see that it still functions same as before. However, we get a neat optimization for free here. MobX will only re-run this getter if the value of the click count changes. If none of the observables in a computed have changed, the getter simply returns the last value without running its body.

    To demonstrate this, let's go ahead and add a log to the getter body. Within the render function, we access this getter twice. Now, without the computed annotation, the getter would get called twice.

    However, as we've annotated it as a MobX computed, when we run the application, you can see that the body of the getter only executes once for each render, even though its value is accessed twice. This is because MobX knows that the observable value used by the getter hasn't changed, and therefore doesn't need to re-run the body to get the new result.

    This is just another example of MobX taking advantage of the observables to give you the best performing UI application with minimal effort.