how does mobx achieve its magic

Question

I am curious as to how mobx works under the hood.

If I have a component that is both an observer and contains observables:

@observer
export default class Form extends Component {
  @observable submitted = false;

  @action.bound
  submit() {
  }
}

How does mobx cause a re-render without using setState or does it use setState?

[the project is right here for you to dig into](https://github.com/mobxjs/mobx) — John Ruddell, May 03 '17 at 21:22
Check out the documentation on 'store': https://mobx.js.org/best/store.html — Anthony Kong, May 04 '17 at 06:00
The accepted answer should be - https://stackoverflow.com/a/64300840/1410291 — palerdot, Oct 23 '20 at 18:12

score 6 · Accepted Answer · answered May 04 '17 at 06:54

6

See: https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254. @observer is basically a shorthand for autorun(() => this.render()) (it is actually a bit more complex, but that is what it conceptualy boils down to)

answered May 04 '17 at 06:54

mweststrate

4,890
1
16
26

6

I went through your article, but it basically describes the conceptual model, not under the hood workings of mobx (i.e. at JavaScript level). For eg, how does any `observer` component gets notified of changes to `observable`s? Does it use an event based system? Can you mention the pseudo code for that? – darKnight May 16 '18 at 17:36

score 4 · Answer 2 · answered Oct 11 '20 at 05:19

4

To understand how mobx works under the hood, check this repl out.

I learned about it from one of the videos of @mweststrate and an academic paper from someone. Both of which I cannot find anymore.

answered Oct 11 '20 at 05:19

Asur

1,949
4
23
41

Make TypeScript version of the code https://shorturl.at/jqP45 – iKBAHT Jun 20 '22 at 15:04

score 2 · Answer 3 · answered May 18 '20 at 18:03

In my understanding, mobx defines its observable properties on stores something like this:

export const nameObservable = new Observable(observer => {
  Object.defineProperty(customState, "firstName", {
    get: function() {
      return this._firstName.toUpperCase();
    },
    set: function(name) {
      this._firstName = name;
      observer.next(this._firstName);
    }
  });
});

// In your component
nameObservable.subscribe(render)

When you execute customState.firstName = 'New name' this will call the set method on property and observer.next will trigger all methods subscribed to this property... causing update in UI.

score 0 · Answer 4 · answered Feb 19 '19 at 11:35

MobX uses Object.defineProperty() to wrap it's own functionality to the assigment operator. When you write something like form.submitted = false, in reality a MobX method is called. Also see https://twitter.com/dan_abramov/status/741633922694586368 and https://x-team.com/blog/es5-object-defineproperty-method/.

how does mobx achieve its magic

4 Answers4