Quick recap on reactions

MobX offers a couple of ways to execute side-effects, but you have to identify which one fits your needs. Here is a quick round-up that can help you in making the right choice.

We have three ways of running side-effects:

1. autorun( effect-function: () => {} ): Useful for long-running side-effects. The effect function executes immediately and also anytime the dependent observables (used within it) change. It returns a disposer function that can be used to cancel anytime.
2. reaction( tracker-function: () => data, effect-function: (data) => {} ): Also for long-running side-effects. It executes the effect function only when the data returned by the tracker function is different. In other words, reaction() waits for a change in the observables before any side-effects are run. It also gives back a disposer function to cancel the effect prematurely.

3. when( predicate-function: () => boolean, effect-function: () => {} ): Useful for one-off effects. The predicate function is evaluated anytime its dependent observables change. It executes the effect function only when the predicate function returns true. when() automatically disposes itself after running the effect function. There is a special form of when() that only takes in the predicate function and returns a promise. Use it with async-await for a simpler when().