Welcome to the interactive tutorial on how to use side-effect "operators" in MobX! Over the course of the next three samples, you'll learn (and be able to explore) exactly how autorun
, when
and reaction
work, and when/why you would use them when building reactive applications.
autorun
takes a function, and immediately runs it. Upon execution, it detects any observables that the function accesses (e.g. observable.property
), and will automatically re-run the function anytime those observables change.
For example, you should have seen the Loading changed
alert display immediately when viewing/running this playground. This is because of the initial autorun
call here. If you click either of the two buttons below, you'll see the alert again.
However, if you click the same button multiple times, you won't see the alert, because the observable isn't changing. Try it for yourself!