frontend
state-management
MobX is a state management library for JS applications that simplifies managing application states in reactive way.
mobx
MobX has three important concepts: State, Actions and Derivations

1. Overview

Store state in MobX can be any structure like: plain objects, arrays, classes, cyclic data structures or references, it does not matter in MobX. MobX track state change through observables. By default, MobX use proxies to make array and plain object observables.
  • Observable state: any value that can be mutated and might serve as source for computed values is state. MobX can make most types of values (primitives, arrays, classes, objects, etc.) and even (potentially cyclic) references observable out of the box.
  • Computed value: Any value that can be computed by using a function that purely operates on other observable values. Computed values can range from the concatenation of a few strings up to deriving complex object graphs and visualizations. Because computed values are observable themselves, even the rendering of a complete user interface can be derived from the observable state. Computed values might evaluate either lazily or in reaction to state changes.
  • Reaction: A reaction is a bit similar to a computed value, but instead of producing a new value it produces a side effect. Reactions bridge reactive and imperative programming for things like printing to the console, making network requests, incrementally updating the React component tree to patch the DOM, etc.
  • Action: All piece of code that modify state.
  • Derivations: derivations is anything can derivate from the state without any further interaction, in other word, derivations are computed values and reaction.
In above figure, a action change observable state, computed value observes this change and re-compute if 
import { action, autorun, computed, makeObservable, observable } from 'mobx';

class Person {
  firstName: string;
  lastName: string;
  nickName: string;

  constructor(firstName: string, lastName: string, nickName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.nickName = nickName;

    makeObservable(this, {
      firstName: observable,
      lastName: observable,
      nickName: observable,
      fullName: computed,
      setFirstName: action,
      setLastName: action,
      setNickName: action,
    });
  }

  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }

  setFirstName(firstName: string) {
    this.firstName = firstName;
  }

  setLastName(lastName: string) {
    this.lastName = lastName;
  }

  setNickName(nickName: string) {
    this.nickName = nickName;
  }
}

const person = new Person('John', 'Doe', 'Dog');

autorun(() => {
  console.log('auto run when firstName changed', person.firstName);
});

autorun(() => {
  console.log('auto run when fullName change', person.fullName);
});

autorun(() => {
  console.log('auto run when nickName change', person.nickName);
});

autorun(() => {
  console.log('auto run when firstName or nickName change', person.fullName, ',', person.nickName);
});
console.log('-----------------------------------1');
person.setFirstName('ABC');
console.log('-----------------------------------2');
person.setLastName('DDDDD');
console.log('-----------------------------------3');
person.setNickName('AAAAAAAA');
mob-flow-examplemob-lazy
Above figures illustrate how observable state, computed value and reaction interact with each other and how fullName state become lazy mode because profile view does not depends on it, so re-computation is unnecessary.
MobX primarily use proxies to implement its feature. Below is an example code that how proxy can track state change.
const observables = new Map(); // Stores tracked values
const dependencies = new Map(); // Maps state properties to dependent functions

function observable(obj) {
  return new Proxy(obj, {
    get(target, prop, receiver) {
      if (!dependencies.has(prop)) dependencies.set(prop, new Set());
      observables.set(prop, target[prop]);
      return Reflect.get(target, prop, receiver);
    },
    set(target, prop, value, receiver) {
      Reflect.set(target, prop, value, receiver);
      if (dependencies.has(prop)) {
        dependencies.get(prop).forEach((fn) => fn()); // Trigger reactions
      }
      return true;
    }
  });
}

const state = observable({ count: 0 });

function reaction(fn) {
  dependencies.get("count").add(fn);
}

reaction(() => {
  console.log(`Count changed to: ${state.count}`);
});

state.count = 1; // Logs: "Count changed to: 1"
state.count = 2; // Logs: "Count changed to: 2"
Below is the computed implementation example
class ComputedValue {
  constructor(computeFn) {
    this.computeFn = computeFn;
    this.cachedValue = null;
    this.dirty = true;
  }

  get() {
    if (this.dirty) {
      this.cachedValue = this.computeFn();
      this.dirty = false;
    }
    return this.cachedValue;
  }

  markDirty() {
    this.dirty = true;
  }
}

const state = observable({ count: 1 });

const doubleCount = new ComputedValue(() => state.count * 2);

reaction(() => {
  console.log(`Double count is: ${doubleCount.get()`);
});

state.count = 2; // Logs: "Double count is: 4"
state.count = 3; // Logs: "Double count is: 6"

COPYRIGHT © 2025