[Bug] mobx-react-lite observer not working due to a react bug

[jzhan-canva]

I have reported this bug to react. a tl;dr is in strict mode, sometime react calls unsubscribe then immediately subscribe on useSyncExternalStore without getting snapshot or re-render

What this means to mobx-react-lite is, the useObserver destroy reaction in unsubscribe, then creates new reaction in subscribe, and depending on re-render to track that reaction. This react behaviour breaks this cycle.

I suggest we add a if(__DEV__) {onStoreChange()} to the subscribe method, to ensure a re-render is scheduled

[paprikman]

I have reported this bug to react. a tl;dr is in strict mode, sometime react calls unsubscribe then immediately subscribe on useSyncExternalStore without getting snapshot or re-render

What this means to mobx-react-lite is, the useObserver destroy reaction in unsubscribe, then creates new reaction in subscribe, and depending on re-render to track that reaction. This react behaviour breaks this cycle.

I suggest we add a if(__DEV__) {onStoreChange()} to the subscribe method, to ensure a re-render is scheduled

I am also experiencing an issue that might rise from the snapshot capturing bug, which is also inconsistent and is hard to reproduce with little code. In particular, reordering items in a list while having their unique ID specified as keys results in the reordered items becoming stale (in terms of the mobx state updates). However, in my case it occurs in the production mode as well.

Do you think this is related?

[mweststrate]

@jzhan-canva sorry, this totally escaped my attention, and I see that the original issue is closed now :/. Dang this sounds problematic indeed. Your suggestion sounds find to me. I'm wondering if we could at a wrapper to onStoreChange that checks a flag to make the run idempotent / cheap. In that case we wouldn't need to guard it with DEV and we might address @paprikman 's issue with it as well

[jeffijoe]

@mweststrate is this maybe also related to #3774 ?

[jzhan-canva]

I just saw react released 19.3 and maybe this fixes the problem react/react#36947
I will go validate

[kubk]

Hi @jzhan-canva did you have a chance to check it?

From my side I can confirm that version 19.3 really does fix the issue 👍

[jzhan-canva]

thanks for validation, seems fixed, closing now