mobxjs / mobxjs/mobx

React 19.2x introduced performance tracks cause observables to be accessed outside reaction

Open
#4,607 3 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🐛 bug
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

  1. open the sandbox
  2. open the dev tools console
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.