MobX

MobX is a state management library for JavaScript applications that implements transparent functional reactive programming. It enables UI components and other parts of an app to react automatically to changes in observable state without requiring extensive boilerplate.

Core concepts in MobX include observables, computed values, actions, and reactions. Observable values are data structures whose changes MobX tracks. Computed values derive from one or more observables and are cached until their dependencies change. Actions are functions that modify observable state, often declared to ensure changes occur in a controlled way. Reactions are side effects that run when their observed data changes; common forms include autorun, reaction, and when. MobX builds a dependency graph so that only the relevant parts of the code re-run when data changes.

MobX uses fine-grained reactivity to minimize unnecessary updates. When an observable changes, only the parts of the system that directly depend on it are updated. Modern MobX relies on ES6 proxies to implement observables and supports async actions, allowing seamless integration with asynchronous data flows.

MobX can be used with React through the mobx-react package, including React bindings and hooks, but it is framework-agnostic and usable with plain JavaScript or other UI frameworks. The MobX ecosystem also includes complementary tools such as mobx-utils and, in some cases, the higher-level MobX State Tree, which provides a structured store pattern built on MobX.

Created by Michel Weststrate, MobX is released under an open-source license and emphasizes simplicity and minimal boilerplate for managing complex, derived, and observable state in modern applications.