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?

Answer 1

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)

Answer 2

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.