React 19.2x introduced performance tracks cause observables to be accessed outside reaction
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28.2k
- Forks
- 1.8k
- Avg merge
- 1h 38m
- Merged PRs (30d)
- 1
Description
Intended outcome:
Use React 19.2.x with mobx in development mode and observableRequiresReaction=true without being spammed by following warnings:
[mobx] Observable 'someProp' being read outside a reactive context.
Actual outcome:
With React 19.2.0, new performance tracks were introduced that show changed props for components:
https://react.dev/reference/dev-tools/react-performance-tracks#changed-props
If observable objects are passed into components, these performance tracks cause warnings if the observableRequiresReaction is enabled:
[mobx] Observable 'someProp' being read outside a reactive context.
How to reproduce the issue:
See the following minimal reproduction sandbox:
https://codesandbox.io/p/sandbox/component-performace-tracks-mobx-warnings-c8wkwy
- open the sandbox
- open the dev tools console
- click the "Next item" button
-> see warnings logged in the console
Does not happen with same sandbox when using React 19.1.4:
https://codesandbox.io/p/sandbox/component-performace-tracks-no-warnings-ttx7gt
Versions
react 19.2.0 and higher
mobx 6.15.0 (but most probably every version)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and compare its React 19.2.0 behavior with the React 19.1.4 sandbox, using the dev-tools console and the “Next item” button. Trace how observable props are inspected by React performance tracks and how MobX handles those reads. Done means the reproduction no longer logs warnings with observableRequiresReaction=true while retaining the intended behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100