Context Consumer not getting updated store values in react/mobx-react-lite

[or-israeli]

Hey, I'm trying to understand the rules of incorporating mobx+context, so I probably do something terribly wrong, but it's seems pretty inconsistent.

Intended outcome:
Ok, so i have a component that is a consumer context that contains a store.
I have a button that's calling action on store, that updates the observable and the computed.
When I use useContext, the values (both observables and computeds are updated and re-render the component, and this is what I expect.

BUT
When I try to use MyContext.Consumer (in the same component) it seems the store gets updated on action, but do not re-render the component.

Versions
"mobx": "6.6.1",
"mobx-react-lite": "3.4.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-scripts": "4.0.0"

Code sandbox with the "bug" (again, not sure it is):
https://codesandbox.io/s/mobx-lite-with-react-context-43fn0s?file=/package.json:152-282

[kubk]

Hello. First of all - if you export store from a module (by making it a singleton) you don't need context at all. I've fixed your example: https://codesandbox.io/s/mobx-lite-with-react-context-forked-fz64fk

The second approach is to avoid singleton (they don't work in SSR) by using React context. Here is another working example: https://codesandbox.io/s/mobx-lite-with-react-context-forked-ohp982

[urugator]

Please see https://mobx.js.org/react-integration.html#callback-components-might-require-observer

Feel free to add <MyContext.Consumer> usage as another example to docs.

[or-israeli]

Thanks :) I'll add it in a few days