Difference between using observable and makeAutoObservable with plain objects

[manuschillerdev]

When using factory functions over classes as mentioned in (https://michel.codes/blogs/mobx6) we can either use makeAutoObservable or just the classic observable.

e.g.

function Store() {
  // version 1
  const store = observable({
    // ...
  });

  // vs version 2
  const store = makeAutoObservable({
    // ...
  });
  
  return store;
}

const myStore = new Store();

https://codesandbox.io/s/black-pine-p0i21?file=/src/index.js

Please note: this is a pretty simplified example without actions or side effects. Nevertheless, we tested them with both versions as well, and found no differences.

Is there any difference between using observable and makeAutoObservable when using the factory pattern and plain objects?

thanks for any clarification :)

[mweststrate]

The first takes the argument as example and construct a new object, the second modifies the object provided. This can affect the binding of for example this in arrow functions.

[urugator]

Also makeAutoObservable takes into account prototypes, while observable looks only for own props.
Prefer observable if you work with plain objects, it should perform slightly better.