Diagnosing MobX Reactivity Failures: A Step‑by‑Step Checklist

Problem Statement

In a React application that uses MobX 6.x, you may notice that component re‑renders, computed values, or reactions do not fire when an observable changes. The UI appears frozen, logs show no change notifications, or devtools show no update tree. This guide walks you through the most common reasons for this failure and how to fix them.

Typical Symptoms

• Counter value displayed in a component does not increment after clicking a button.
• Computed list remains unchanged even though underlying observables have been updated.
• MobX devtools show the observable node but no reaction or observer nodes attached.
• Console displays warnings such as "Strict mode: attempting to modify state outside of an action".

Common Causes – Quick Reference Table

Cause	Why It Happens	Typical Fix
Observable not declared	Missing @observable or observable()	Add the decorator or call observable()
Computed not marked	Missing @computed or computed()	Mark the getter with @computed or wrap with computed()
Strict mode mutation	State mutated outside @action	Wrap mutation in @action or disable strict mode
Component not observed	Missing observer wrapper or wrong import	Wrap component with observer() from mobx-react-lite
Legacy decorators without makeObservable	Decorators ignored in constructor	Call makeObservable(this) before accessing fields
Stale closure reference	Component captures old observable value	Re‑create component or use useEffect to reset reference
Devtools disconnected	Changes not visible in UI	Enable MobX devtools extension and connect

Diagnostic Checklist

1. Verify Observable Declaration

   
   import { makeAutoObservable } from "mobx";
   
   class CounterStore {
     count = 0;
   
     constructor() {
       makeAutoObservable(this); // ensures all fields are observable
     }
   }
   
   export const counter = new CounterStore();
   

   Run npm ls mobx to confirm the correct version. If you use decorators, ensure experimentalDecorators and emitDecoratorMetadata are true in tsconfig.json.

2. Check Computed Getters

   
   @computed
   get double() {
     return this.count * 2;
   }
   

   Open devtools; the computed node should appear under the observable. If missing, the decorator was not applied.

3. Inspect Strict Mode Warnings

   
   // In index.tsx
   import { enableStaticRendering } from "mobx-react-lite";
   enableStaticRendering(false); // default is false
   

   Run the app and look for console errors about mutations outside actions. If present, wrap the mutation:

   
   @action.bound
   increment() {
     this.count++;
   }
   

4. Confirm Observer Wrapper

   
   import { observer } from "mobx-react-lite";
   
   const CounterDisplay = observer(() => {
     return {counter.count};
   });
   

   Without observer, the component will not re‑render on observable changes.

5. Test with Devtools

   Open the MobX devtools extension, click Refresh, then perform the action that should trigger a change. Verify that the observable node shows a new value and that the observer node is highlighted.

6. Check for Stale Closures

   If you pass the store to a child component via props, ensure the child does not capture a stale reference:

   
   const Child = observer(({ store }) => {
     return {store.count};
   });
   

7. Unit‑Test Verification (Optional)

   Use mobx-utils to spy on a reaction:

   
   import { reaction } from "mobx";
   
   let called = false;
   reaction(() => counter.count, () => { called = true; });
   
   counter.increment();
   console.assert(called, "Reaction did not fire");
   

Fixes Tied to Findings

• Missing @observable – add the decorator or switch to makeAutoObservable.
• Missing @computed – annotate the getter or wrap with computed(() => ...).
• Strict mode violation – wrap all state changes in @action or disable strict mode with configure({ enforceActions: "never" }).
• Component not observed – import observer from mobx-react-lite and wrap the component.
• Legacy decorators – call makeObservable(this) in the constructor before any field access.
• Stale closure – recreate the component or use useEffect to reset references.
• Devtools disconnected – install the browser extension, ensure mobx-devtools-mst is added to devtools config, and refresh the page.

Escalation Criteria

1. If all diagnostics above return clean but the UI still does not update, suspect a deeper integration issue (e.g., mixing mobx-state-tree with plain MobX).
2. Check for concurrent React features like ConcurrentMode that may affect rendering; ensure observer is used correctly with useObserver if needed.
3. Consult the official MobX issue tracker or community forums with the minimal reproducible example; include the diagnostic steps you performed.

By following this structured approach, you can isolate whether the problem lies in declaration, mutation discipline, component wiring, or tooling, and apply the appropriate fix without unnecessary trial and error.