Primitive values and references

All primitive values in JavaScript are immutable and hence per definition not observable. Usually that is fine, as MobX usually can just make the property that contains the value observable. See also observable objects. In rare cases it can be convenient to have an observable "primitive" that is not owned by an object. For these cases it is possible to create an observable box that manages such a primitive.

So accepts any value and stores it inside a box. The current value can be accessed through .get() and updated using .set(newValue).

Furthermore you can register a callback using its .observe method to listen to changes on the stored value. But since MobX tracks changes to boxes automatically, in most cases it is better to use a reaction like mobx.autorun instead.

So the signature of object returned by is:

  • .get() Returns the current value.
  • .set(value) Replaces the currently stored value. Notifies all observers.
  • intercept(interceptor). Can be used to intercept changes before they are applied. See observe & intercept
  • .observe(callback: (change) => void, fireImmediately = false): disposerFunction. Registers an observer function that will fire each time the stored value is replaced. Returns a function to cancel the observer. See observe & intercept. The change parameter is an object containing both the newValue and oldValue of the observable., { deep: false })

Creates a box based on the ref decorator. This means that any (future) value of box wouldn't be converted into an observable automatically.


import {observable} from "mobx";

const cityName ="Vienna");

// prints 'Vienna'

cityName.observe(function(change) {
    console.log(change.oldValue, "->", change.newValue);

// prints 'Vienna -> Amsterdam', { name: "my array" })

The name option can be used to give the box a friendly debug name, to be used in for example spy or the MobX dev tools.