Book Image

MobX Quick Start Guide

By : Pavan Podila, Michel Weststrate
Book Image

MobX Quick Start Guide

By: Pavan Podila, Michel Weststrate

Overview of this book

MobX is a simple and highly scalable state management library in JavaScript. Its abstractions can help you manage state in small to extremely large applications. However, if you are just starting out, it is essential to have a guide that can help you take the first steps. This book aims to be that guide that will equip you with the skills needed to use MobX and effectively handle the state management aspects of your application. You will first learn about observables, actions, and reactions: the core concepts of MobX. To see how MobX really shines and simplifies state management, you'll work through some real-world use cases. Building on these core concepts and use cases, you will learn about advanced MobX, its APIs, and libraries that extend MobX. By the end of this book, you will not only have a solid conceptual understanding of MobX, but also practical experience. You will gain the confidence to tackle many of the common state management problems in your own projects.
Table of Contents (17 chapters)
Title Page
Packt Upsell


Reactive programming has captured the imagination of programmers for decades. Once the gang of four standardized the observer design pattern, the term has become part of the standard vocabulary of every programmer:

Observer : Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

– Design Patterns, Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides, 1995

Nonetheless, there is a wide variety of technologies, libraries, and frameworks implementing the observer pattern. Yet, MobX is unique in the way it applies this pattern to state-management. It has a very friendly syntax, a small core API that makes it easy to learn as a beginner, and it can be applied in any JavaScript project. Moreover, the library has proven scalable, not just at Mendix where the project was first applied, but also in famous projects, such as Microsoft Outlook, Battlefield 1 by DICE, Jenkins, Coinbase, and many, many more.

This book will not just guide you through the basics; it will also immerse you in the philosophy of MobX: Anything that can be derived from the application state, should be derived. Automatically.

MobX is not the first of its kind, but it is standing on the shoulders of giants and has pushed the boundaries of what is possible with the transparent reactive programming paradigm. For example, it is, as far as the authors know, the first major library that combines reactivity with synchronous transactions and the first to explicitly distinguish the concept of derived-values and automatic side effects (reactions).

Unlike many learning materials, this book guides you through the inner workings of MobX and its many extension points. This book will hopefully leave a lasting impression that an essentially simple (and very readable!) paradigm can be used to accomplish tasks that are very challenging, not just in terms of domain complexity, but also in terms of performance.


Who this book is for

State management plays a crucial role in any application where state is relevant across different places in the code base. This is either because there are multiple consumers or multiple producers of data. In practice, this means that MobX is useful in any application that has a non-trivial amount of data entry or data visualization.

MobX has official bindings for React.js, Preact, and Angular. However, many have used the library in combination with libraries and frameworks such as jQuery, konva.js, Next.js, Vue.js, and even Backbone. When working through the book, you will discover that the concepts required to use a tool like MobX are universally applicable in any environment.

What this book covers

Chapter 1, Introduction to State Management, starts with a conceptual treatment of state-management and its many nuances. It introduces the side-effect model and prepares you with the philosophy needed to understand MobX. Finally, it gives a speed tour of MobX and some of its core building blocks.

Chapter 2, Observables, Actions, and Reactions, takes a deeper look at the core building blocks of MobX. It shows you the various ways of creating observables, using actions to cause mutations on the observables, and, finally, the use of reactions to react to any changes happening on the observables. These three form the core triad of MobX.

Chapter 3, A React App with MobX, combines the knowledge gained so far to power a React App with MobX. It tackles the use case of searching books in an online store. The app is built by first identifying the core observable state, using actions to mutate the state, and using reactions via the observer() utility from mobx-react. The React components are the observers that react to changes in the observable state and automatically render the new state. This chapter will give you an early taste of how simple MobX can be for state management in React apps.

Chapter 4, Crafting the Observable Tree, puts laser focus on designing the observable state with the various options in MobX. We will tackle how to limit the observability in MobX and learn how to create a tight observable state that only observes the necessary and nothing more. In addition to limiting observability, we will also see how to expand the observability with extendObservable(). Finally, we will look into computed properties and look at the use of ES2015 classes to model the observable state.

Chapter 5Derivations, Actions, and Reactions, goes further into the core building blocks of MobX and explores the API in greater detail. It also touches upon the philosophies governing these building blocks. By the end of this chapter, you will cement your understanding and core intuitions around MobX.

Chapter 6, Handling Real-World Use Cases, is where we apply MobX to two important real-world use cases: form handling and page routing. Both are very visual in nature, but we will argue that they can be dealt with much more easily when represented as observable state, actions, and reactions in MobX. This representation makes the React components (the observers) a natural visual extension of the state. We will also develop our core intuitions around state modelling with MobX.

Chapter 7, Special API for Special Cases, is a survey of APIs that are low level and capable but hide in the shadows of the top-level APIs. such as observable(), action(), computed(), and reaction(). We will explore these low-level APIs and then take a brief tour of the debug utilities available for MobX developers. It is comforting to know that MobX has your back from all angles, even in those rare, odd cases.

Chapter 8, Exploring mobx-utils and mobx-state-tree, gives you a taste of some useful packages that can simplify the everyday use cases encountered in MobX-driven development. As the name suggests, mobx-utils is a utility tool belt containing an assortment of functions. On the other hand is the powerful mobx-state-tree, commonly referred to as MST, that prescribes an approach for scalable MobX applications, baking in patterns that you get for free, once you adopt the MST style of thinking. It is a worthy upgrade to MobX and a must-have for serious users.

Chapter 9, MobX Internals, is where we culminate by peeling off the layers and peeking into the inner workings of MobX. The core abstractions are surprisingly simple and well defined, and they neatly separate the responsibilities. If the term transparent functional reactive programming sounds like a black art, this is the chapter that will unravel the magic and reveal how MobX embraces it. This chapter is also an initiation into the MobX code base and a worthy read for anyone aspiring to be a core contributor to the MobX project.

To get the most out of this book

MobX is typically used in programming environments where long-living, in-memory state plays an important role, most notably web, mobile, and desktop applications. The book requires basic understanding of the JavaScript programming language, and will use modern ES2015 syntax in its examples. Frontend examples are based on the ReactJS framework, so some familiarity with it will be useful, but it's not necessary.

Download the example code files

You can download the example code files for this book from your account at If you purchased this book elsewhere, you can visit and register to have the files emailed directly to you.

You can download the code files by following these steps:

  1. Log in or register at
  2. Select the SUPPORT tab.
  3. Click on Code Downloads & Errata.
  4. Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR/7-Zip for Windows
  • Zipeg/iZip/UnRarX for Mac
  • 7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here:

Code in Action

Visit the following link to check out videos of the code being run:

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."

A block of code is set as follows:

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(Component)

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

import { observable, autorun, action } from 'mobx';

let cart = observable({
itemCount: 0,
modified: new Date(),

Any command-line input or output is written as follows:

$ mkdir css
$ cd css

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."


Warnings or important notes appear like this.


Tips and tricks appear like this.



Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit


Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit