State Management in React Using MobX State Tree (MST)

If you are a React developer, you most likely work with different state management libraries like React Redux, Redux Toolkit, React Query, or even Zustand!

But, have you ever tried using MobX or MobX-State-Tree (MST)?

In this post, I'll share a brief overview of working with MST and why you should consider exploring the library for state management in your next project (+ why you probably may not!)

Brief Overview: What even is MobX-State-Tree?

MobX State Tree **(**MST for short) is a state management library that self-describes as offering "fully-featured reactive state management without the boilerplate".

Some of the features it offers out-of-box include: centralised stores for your data, ability to mutate data safely while also having access to trace those updates, runtime and static type checking, etc.

Useful Read:

• MST Philosophy

Why Try It?

It's a lot less boilerplate than working with Redux!

If there was anything I really liked about using MST, it's the compactness and manageability. Of course, you can have large stores (trees) that are also part of a root store, but I found managing stores a lot easier with MST.

It's a lot less brainwork when you don't have to worry about defining constants as types for actions, or reducers that manage the states all in different files, not to mention managing them across multiple folders.

It also gives you a balance between mutability and immutability.

Immutability is one of the ways Redux safely handles data management, but that means having go through all of the above to update the 'immutable' data. On the other hand, MST provides a balance between the two. It's easier to update data within the protection measures the library offers.

Its official documentation also includes a pretty decent tutorial if you are new to using the library and would like to gain a basic understanding.

Why You Probably May Not Like It

Diving into MST can be proper confusing at first. I get it, I've been there before.

When you advance from the basic usage described in the tutorial and need it for a complex project or to utilise its advanced concepts, the official documentation is not the best to understand concepts, in my opinion. I found myself struggling a lot, and had to keep inferring my understanding from existing stores that had been defined in the project I was working on.

While it does seem to be a popular library, there's barely any engagement on Stack Overflow, so you might find yourself stuck and trying to figure out error messages yourself.

P.S Not to be confused with MobX itself, which has slightlyyyy more questions and engagement.

It is also a very opinionated library with strict rules on how data should be structured and how trees interact with one another. While you may be familiar with many of the basic concepts if you've worked with state management libraries before (e.g views, actions), they have more complexities that make them work a bit differently (and can be frustrating at first).

It also has several new concepts that you will need to learn to maximise its "fully-featured" benefits (and you'll have to be the better judge for what works or does not work for your project).

Summary

I cannot say I fully understand how the library works yet, but so far, I have learned more about its usage and how to utilise it in projects. Working with an already established store design can also make it easier for you to figure out how to use its regular features.

In addition, despite being opinionated, the library still gives room for flexibility for developers to shape their store management in different ways based on preference. It also offers more features that can make state management easier, and reduces boilerplate.

Overall, one to consider incorporating into your next project.

---

P.S Some Bookmarks to help you navigate through the official documentation:

• FAQs

• Using MST with React

• Learn about MST types