A MobX autorun in a todo app re-runs more often than expected and keeps running after its screen closes; how do you find what it tracks, and how do you stop it?

## Why MobX reactions are hard to see MobX's **transparent reactivity** means nobody writes subscriptions. A reaction — an `autorun`, a `reaction`, or the render of an `observer` component — subscribes to whatever it happens to read. That is concise, but it makes two classes of bug possible: - **Over-subscription.** A reaction reads more than it needs and re-runs on unrelated changes. - **Leaked reactions.** A reaction keeps running after the thing that created it is gone. The todo scenario has both: a screen sets up `autorun(() => console.log(JSON.stringify(store.todos)))` to log changes, and after navigating away, logs keep appearing on every edit. ## Finding out what a reaction tracks An `autorun` depends on everything it read in its **last** run: observable fields, array items and lengths, and computeds (with their own dependencies behind them). `JSON.stringify` walks the whole array and reads every property of every todo, so each title, `done` flag and the array itself become dependencies. MobX ships tools to confirm this: | Tool | Where you call it | What it shows | |---|---|---| | `trace()` / `reaction.trace()` | inside a reaction, computed or observer render | logs why that derivation re-ran; `trace(true)` enters the debugger | | `trace(store, 'remaining')` | anywhere, naming a computed | the same, for that computed | | `getDependencyTree(thing, prop?)` | on a reaction or computed | every observable it currently depends on | | `getObserverTree(thing, prop?)` | on an observable | every reaction and computed observing it | | `spy(listener)` | once, globally | every action, change and reaction run | `trace(true)` is the fastest route to "who changed what": it pauses in the debugger when the triggering mutation is still a few stack frames up. `getObserverTree(store, 'todos')` answers the reverse question, which reactions a noisy observable wakes. ## Narrowing the dependencies 1. **Use `reaction` instead of `autorun`.** `reaction(() => store.todos.length, (n) => log(n))` tracks only what the data function reads, so the effect runs only when the length changes. 2. **Depend on a computed.** A computed such as `store.remaining` re-runs its readers only when its result changes by its comparer, filtering out edits that do not matter. 3. **Use comparers and options.** `equals: comparer.structural` on a reaction ignores structurally equal results; `delay` throttles bursts. 4. **Avoid reading in the effect what should be tracked in the data function**, and the reverse. ## Stopping reactions: disposal `autorun`, `reaction` and `when` all return a **disposer** function. Calling it unsubscribes the reaction from everything it observed. The MobX docs note that a reaction is garbage-collected only when all the objects it observes are, so a reaction created by a short-lived screen against a long-lived store lives as long as the store. Ways to dispose: - Call the disposer, for example from a store's own `dispose()` method. - In React, return it from an effect: `useEffect(() => autorun(() => { ... }), [store])`. The disposer is the effect's cleanup, so unmount stops it. - Pass `signal` (an `AbortSignal`) in the options and abort it. - Call `reaction.dispose()` from inside the effect, using the reaction argument. - Where supported, the disposer also implements `[Symbol.dispose]` for `using` and disposable stacks. `observer` components need none of this: their reaction is disposed when the component unmounts. `when` without an effect returns a promise that has a `cancel()` method. ## Reading a trace in practice Put `reaction.trace()` as the first line of the noisy autorun and edit one todo's title. The console names the observable whose change caused the re-run, for example a specific todo's `title`, which confirms that serialisation made titles dependencies. Switch the autorun to a `reaction` on `store.todos.length`, repeat the edit, and the effect stays silent; only adding or removing a todo triggers it now. ## Guard rails for a team - `configure({ reactionRequiresObservable: true })` warns when a reaction reads no observables, catching reactions that do nothing. - `configure({ observableRequiresReaction: true })` warns about observable reads outside any reactive context. - Give reactions a `name` option so `spy` output and developer tools are readable. - Review every `autorun` for a matching disposer, just as you would an event listener. ## The trade-off in one line MobX removes subscription code, and with it the place you would normally look to see what depends on what; `trace`, the dependency trees and `spy` put that visibility back.