MobX, by default, applies deep observability on your objects, arrays, and maps. This allows you to see changes happening at any level in the observable tree. Although this a great default to start with, at some point, you will have to pay more attention to limit the observability. Cutting down on the observability also improves performance as there are fewer things to track from the point of view of MobX.
There are two distinct ways in which you can control observability:
- By using the various
@decoratorsinside classes - By using the
decorate()API
Decorators are a syntactic feature that allow you to attach behavior to a class and its fields. We have already seen this in Chapter 3, A React App with MobX, so the following code should be very familiar:
class BookSearchStore {
@observable term = 'javascript';
@observable status = '';
@observable.shallow results = [];
@observable totalCount = 0;
}Using the @observable decorator, you can make properties of...