I’ve been using Mobx for a couple of months now, and I’ve only recently grokked the core concept behind the library. Silly me. I found the docs to be pretty unclear, so I’d like to explain to you, dear reader, what this awesome library is doing.

Mobx can watch the execution of any function, determine which observable values were accessed, and then do whatever you tell it to what that information. That’s it.

This mechanism enables mobx-react . Mobx simply observes which values are accessed during the lifecycle of a given component, and stores those values. Any time one of those values is changed, mobx-react tells the component to re-render. Simple.

It also enables functions like reaction . Pass in two functions. In the first, some observables are accessed. References to those are stored. Whenever any of them change, the second function is called. Hence the name, reaction .

I found that I didn’t understand the docs for functions like autorun and reaction , because I didn’t really get what was happening behind the scenes. But understanding the simple observation mechanism has made me more confident in writing reactive code.

I happen to think the learning curve of Mobx is much steeper than, say, redux , because of all the magic going on in the library. But grokking this core mechanism made my debugging process a lot easier — I hope it does yours, too.