A note on observability

When you use the observable() API, MobX will apply deep observability to the observable instance. This means it will track changes happening to the observable object, array, or map and do it for every property, at every level. In the cases of arrays and maps, it will also track the additions and removals of entries. Any new entry in an array or a map is also made into a deep observable. This is definitely a great sensible default and works well for most situations. However, there will be cases where you may not want this default. 

You can change this behavior at the time of creating the observable. Instead of using observable(), you can use the sibling APIs (observable.object(), observable.array(), observable.map()) to create the observable. Each of these takes an extra argument for setting options on the observable instance. Take a look at this:

observable.object(value, decorators, { deep: false });
observable.map(values, { deep: false });
observable.array(values, { deep: false });

By passing in { deep: false } as an option, you can effectively prune the observability just to the first level. This means the following:

For observable objects, MobX only observes the initial set of properties. If the value of property is an object, an array, or a map, it won't do any further observation.

For observable arrays, MobX only observes the addition and removal of items in the array. If an item is an object, an array, or a map, it won't do any further observation.

For observable maps, MobX only observes the addition and removal of items in the map. If the value of a key is an object, an array, or a map, it won't do any further observation.

Now, it is worth mentioning that observable() internally calls one of the preceding APIs and sets the option to { deep: true }. This is the reason observable() has deep observability.