MobX + React. Can someone show some real useful cases for autorun, intercepter and observe?

Question

I'm using MobX + React in my project near half of year. We use only @observer, @computed, reaction and sometimes when

Can someone show really useful cases for using autorun, intercepter and observe?

Answer 1

autorun

Since you are using react (or any other framework that has mobx bindings) there is no real case to use autorun. When you are using reactjs you are wrapping your components in observer so they are automatically wired to respond (render) to mobx observables. But if you are using vanilla js, then autorun is essential because it enables you to react to mobx changes. If you look at the documentation for autorun you will see that all the examples are vanilla js.

observe

It is a powerful low-level function that enables you to monitor what is actually happening to your observables. So let's say in case of an Array you can observe the changes that are happening to the array, so you can be notified exactly what has been changed. For example, you can be notified what value exactly was added, at what index. You can't do that with regular arrays, but since mobx is wrapping everything with proxies you might say that this function sits between the proxy and the real array and monitors how proxy (mobx) is modifying the array. More info in the docs - observe

intercept

It is a function similar to the observe you might think of that function that sits above the observe function and it has a chance to change the values that mobx is trying to assign to the observables. So in case that you have person.job object and property you can set up intercept on person.job and you will have the chance to modify the value that should be assigned to the person.job and before mobx notifies everyone of that change. So in the case of person.job you can force only pilot or sailor values, and throw on anything else. More info in the docs - intercept