What kind of issue is this?
Link to repro
https://github.com/BranZhang/react-compiler-mobx-repro
Repro steps
Summary
When babel-plugin-react-compiler is enabled with compilationMode: 'infer', a MobX observer component declared as a top-level function and then wrapped with observer(Component) can keep returning stale JSX after observable changes.
The failure is silent: no runtime error or compiler warning is shown. The UI keeps rendering the initial value after the MobX store changes.
Reproduction
Repository: https://github.com/BranZhang/react-compiler-mobx-repro
Open http://localhost:5199, then click store.increment() three times.
Actual Behavior
The rows using a top-level function declaration wrapped by observer(...) keep displaying 0:
plain observer: 0observer + console.log: 0
The MobX store value does change, and other subscribers can observe the updated value.
Expected Behavior
The observed component should continue to update when COUNTER_STORE.count changes, or React Compiler should skip this pattern / warn that it is unsafe.
Control Cases
The same reproduction includes several control cases:
observer + window write updates to 3, because the render-time global assignment makes React Compiler bail out.observer + 'use no memo' updates to 3, because the component is skipped by React Compiler.reaction + useState updates to 3, because it uses an explicit MobX subscription instead of render-time observer tracking.- Commenting out
babel-plugin-react-compiler in vite.config.ts makes all rows update correctly.
- Changing
const Plain = observer(PlainComponent) to an inline function expression passed to observer(...) also makes the row update correctly.
Suspected Mechanism
observer relies on executing the component function during render inside a MobX tracking context. Observable reads that actually happen during render become the component subscription.
The compiled output shows that COUNTER_STORE.count is still read on every render, so MobX continues tracking the observable and notifying the component. However, React Compiler caches the JSX created during the initial render without treating the observable value as a dependency. After a store update:
- MobX triggers a re-render.
- The component reads the latest
COUNTER_STORE.count, so the MobX subscription remains active.
- The compiled memo cache returns the JSX created during the initial render.
- The component therefore keeps displaying the initial value even though it continues to re-render with updated observable values.
Versions
- react: 19.2.0
- react-dom: 19.2.0
- mobx: 6.13.3
- mobx-react: 9.2.2
- mobx-react-lite: 4.1.1
- babel-plugin-react-compiler: 1.0.0
- vite: 5.4
How often does this bug happen?
Every time
What version of React are you using?
19.2.0
What version of React Compiler are you using?
babel-plugin-react-compiler@1.0.0
What kind of issue is this?
Link to repro
https://github.com/BranZhang/react-compiler-mobx-repro
Repro steps
Summary
When
babel-plugin-react-compileris enabled withcompilationMode: 'infer', a MobXobservercomponent declared as a top-level function and then wrapped withobserver(Component)can keep returning stale JSX after observable changes.The failure is silent: no runtime error or compiler warning is shown. The UI keeps rendering the initial value after the MobX store changes.
Reproduction
Repository: https://github.com/BranZhang/react-compiler-mobx-repro
Open
http://localhost:5199, then clickstore.increment()three times.Actual Behavior
The rows using a top-level function declaration wrapped by
observer(...)keep displaying0:plain observer: 0observer + console.log: 0The MobX store value does change, and other subscribers can observe the updated value.
Expected Behavior
The observed component should continue to update when
COUNTER_STORE.countchanges, or React Compiler should skip this pattern / warn that it is unsafe.Control Cases
The same reproduction includes several control cases:
observer + window writeupdates to3, because the render-time global assignment makes React Compiler bail out.observer + 'use no memo'updates to3, because the component is skipped by React Compiler.reaction + useStateupdates to3, because it uses an explicit MobX subscription instead of render-timeobservertracking.babel-plugin-react-compilerinvite.config.tsmakes all rows update correctly.const Plain = observer(PlainComponent)to an inline function expression passed toobserver(...)also makes the row update correctly.Suspected Mechanism
observerrelies on executing the component function during render inside a MobX tracking context. Observable reads that actually happen during render become the component subscription.The compiled output shows that
COUNTER_STORE.countis still read on every render, so MobX continues tracking the observable and notifying the component. However, React Compiler caches the JSX created during the initial render without treating the observable value as a dependency. After a store update:COUNTER_STORE.count, so the MobX subscription remains active.Versions
How often does this bug happen?
Every time
What version of React are you using?
19.2.0
What version of React Compiler are you using?
babel-plugin-react-compiler@1.0.0