Observable.get default access dependency tracking

The Dependency Tracking Gap

In MobX (specifically 6.x), dependency tracking is triggered by the actual access of an existing observable property. When using a pattern like observable.get(key, fallback), if the key does not exist, the property getter is never invoked on the observable object. Consequently, the reaction (observer or reaction) does not register a dependency on that specific key, and the UI will not update when that key is eventually defined.

Confirmed Behavior vs. Likely Design Intent

Confirmed Fact: MobX tracks accesses, not intent. If the execution path returns a fallback without touching an observable property, no dependency is created. This is consistent with how MobX optimizes performance by avoiding the tracking of every possible key in a dynamic object.

Likely Explanation: Treating a missing key as a dependency would require MobX to track the entire keyset (the "shape") of the object for every get call. This would significantly increase memory overhead and potentially cause excessive re-renders whenever any property is added or removed from the object, regardless of whether that specific property is used.

Recommended Patterns for Guaranteed Tracking

To ensure a reaction triggers when a property moves from undefined to a defined value, use one of the following strategies:

• Use ObservableMaps: Replace plain observable objects with observable.map(). Maps in MobX track additions and removals of keys. Accessing a missing key in a map still registers a dependency on the map's internal state.
• Explicit Shape Tracking: If you must use an object, track a "version" or "lastUpdated" property that is incremented whenever the object's structure changes.
• Pre-defining Keys: Initialize the observable object with the expected keys set to undefined. Since the key exists, the getter is invoked, and the dependency is registered.

Verification Step

You can verify this behavior with the following scoped test:

import { observable, autorun } from "mobx";

const state = observable({ a: 1 });

// This will NOT trigger when 'b' is added
autorun(() => {
  console.log("Value:", state.b ?? "fallback");
});

state.b = 2; // No log output

To resolve this, swapping state to observable.map({ a: 1 }) will cause the autorun to trigger immediately upon state.set('b', 2).

Diagnostic Detail

Are you utilizing observable.map or plain observable objects for these dynamic keys? The recommendation differs significantly based on the data structure used.