Some components stopped observing mobx state after upgrading to React 19

[paprikman]

Summary

I have encountered a strange issue of mobx stops observing state in some components after upgrading to React 19. I believe that this is connected with its more strict approach to memo-wrapped components since version 19.

This happens in

• some lists which use unique item ID as a key, where data update with a larger bulk takes place. Say, there was initial list of 10 items, and there is an update of the data, which now has 20 items, including the previous 10 ones. The initial 10 items will stop receiving mobx state updates. Using index as a key resolves the issue;
• some isolated components that do not receive props other than the store instance object;
• both production and development mode (with strict mode on or off);

In addition,

• every state consuming component is wrapped in the observer HoC;
• the aforementioned list data is updated by creating a new array, rather than mutating the existing one;
• state subscription also drops not only for arrays, but for some primitive observables as well;
• all components receive mobx store instance either as a prop or via context. The issue persists with both approaches;
• there are no errors in the browser console.

Disabling the built-in memo wrapping inside the observer HoC make this problem vanish.

The main issue is that I cannot reproduce this in an isolated environment, this only happens in some components in a large production codebase. There is no clear reproduction pattern that I can observe.

I would highly appreciate getting help in pinpointing the source of this problem.

Dependencies and setup

Current

• mobx 6.13.7;
• mobx-react-lite 4.1.0;
• react 19.1.1;

Before upgrading to React 19 (same codebase)

• mobx 6.13.5
• mobx-react-lite 4.1.0
• react 18.2.0

[mweststrate]

I'd check first if none of the packages you listed above (react, mobx, etc) accidentally appear twice in your lock.file / node_modules. No other known issues, so if that is not the case, you'd have to find a way to reproduce.

[paprikman]

Yes, there is one of each only.

I found out that this happens in lists if the order of its items is changed during list update (i.e. there is a new batch of data with different sorting), so this should be solely related to the react memo, and not to the mobx.