Mobx-React does not work with React.CreateContext

[jantimon]

Versions

Newest versions as of May 2018

mobx: 4.2.1
mobx-react: 5.1.2
react: 16.3.2
react-dom: 16.3.2

Bug

It seems like it is not possible to create an observing context consumer.

// A simple store which counts up the count value:
class CounterStore {
  @observable count: number = 0;
}
const counterStore = new CounterStore();
setInterval(() => counterStore.count ++, 1000);

// A simple context for the store
const Context = React.createContext<CounterStore>(null);

Expected behaviour

All context.consumers which rely on an observed value should rerender once an observed value changes.

Actual behaviour

The following screenshot contains two components which rely on the same observable value.
The first component does not access the observed value the second one does.
As you can see the first component does not rerender.

Demo

The following demos show two scenarios for the same problem:

ReactContext which holds a mobx store
https://stackblitz.com/edit/react-ts-q5ktj1?file=index.tsx

ReactContext which does not hold a mobx store
https://stackblitz.com/edit/react-ts-rjk13r?file=index.tsx

[mweststrate]

This behavior is as expected, you are making the wrong component observer; BrokenDisplay is not the component that renders store.count, it is rendered by the Consumer component, which is MobX unawary.

You can either extract your anonymous function to a component and mark it withobserver, or use (store) => <Observer><span>{store.count}</span></Observer>

[jantimon]

Thank you very much - your example contains a small error but helped me to find the solution.
The following code works for me:

(store) => (
        <Observer>
          {() => (
            <span>{store.count}</span>
          )}
        </Observer>
      )}
)

I also created a working demo for reference:
https://stackblitz.com/edit/react-ts-2pvbmx?file=index.tsx

[jantimon]

The following code would create a observable Consumer:

  const Context = React.createContext<{ theme: string}>(null);
  const ObservableConsumer = ({children}) => {
     return <Context.Consumer>{(value) => (
    <Observer>{() => children(value)}</Observer>
  )}</Context.Consumer>

Do you think an abstraction like the following could be added to mobx-react?

function createObserableContext<T>(defaultValue: T, calculateChangedBits?: (prev: T, next: T) => number) {
  const Context = React.createContext<T>(defaultValue, calculateChangedBits);
  const ObservableConsumer = ({ children }) => {
    return <Context.Consumer>{(value) => (
      <Observer>{() => children(value)}</Observer>
    )}</Context.Consumer>
  }
  return { Provider: Context.Provider, Consumer: ObservableConsumer }
}

Demo: https://stackblitz.com/edit/react-ts-at3ucs?file=index.tsx

[mweststrate]

I suspect that `const ObservableConsumer = observer(Context.Consumer)` would do the trick already. Not sure if it belongs to this package, there is a more concise context mechanism already in the form of Provider / inject, and two mechanisms to offer the same thing is often confusing for others Op ma 7 mei 2018 om 11:08 schreef Jan Nicklas <notifications@github.com>:

…

The following code would create a observable Consumer: const Context = React.createContext<{ theme: string}>(null); const ObservableConsumer = ({children}) => { return <Context.Consumer>{(value) => ( <Observer>{() => children(value)}</Observer> )}</Context.Consumer> Do you think an abstraction like the following could be added to mobx-react? function createObserableContext<T>(defaultValue: T, calculateChangedBits?: (prev: T, next: T) => number) { const Context = React.createContext<T>(defaultValue, calculateChangedBits); const ObservableConsumer = ({ children }) => { return <Context.Consumer>{(value) => ( <Observer>{() => children(value)}</Observer> )}</Context.Consumer> } return { Provider: Context.Provider, Consumer: ObservableConsumer } } Demo: https://stackblitz.com/edit/react-ts-at3ucs?file=index.tsx — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#471 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhHy1goPw0H2GnG1Te9NOfpUPCxxeks5twA75gaJpZM4Tz_4Y> .

[jantimon]

Unfortunately this does not work:

https://stackblitz.com/edit/react-ts-heai4b?file=index.tsx

Also this causes also problems for a Context which is independent from mobx (e.g. a theme context)

[mweststrate]

ok, was worth trying Op ma 7 mei 2018 om 16:11 schreef Jan Nicklas <notifications@github.com>:

…

Unfortunately this does not work: https://stackblitz.com/edit/react-ts-heai4b?file=index.tsx — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#471 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhKm_0-Q4YEI_C1915jtpllC2SPFFks5twFYbgaJpZM4Tz_4Y> .

[malekpour]

I like the idea of createObserableContext and using a version of what @jantimon provided. But a question here from @mweststrate. Is <Observer /> component going to be deprecated? I've seen a few comments about it in the source code e.g. https://github.com/mobxjs/mobx-react/blob/master/src/observer.js#L410

This is the helper function I am using:

export function createObserableContext<T>(defaultValue: T, calculateChangedBits?: (prev: T, next: T) => number): React.Context<T> {
  const Context = React.createContext<T>(defaultValue, calculateChangedBits);
  return {
    Provider: Context.Provider,
    Consumer: (props: React.ConsumerProps<T>) => (
      <Context.Consumer>{(value: T) => <Observer>{() => props.children(value)}</Observer>}</Context.Consumer>
    )
  }
}

[mweststrate]

No Op wo 27 jun. 2018 21:30 schreef Ali Malekpour <notifications@github.com>:

…

I like the idea of createObserableContext and using a version of what @jantimon <https://github.com/jantimon> provided. But a question here from @mweststrate <https://github.com/mweststrate>. Is <Observer /> component going to be deprecated? I've seen a few comments about it in the source code e.g. https://github.com/mobxjs/mobx-react/blob/master/src/observer.js#L410 This is the helper function I am using: export function createObserableContext<T>(defaultValue: T, calculateChangedBits?: (prev: T, next: T) => number): React.Context<T> { const Context = React.createContext<T>(defaultValue, calculateChangedBits ); return { Provider: Context.Provider, Consumer: (props: React.ConsumerProps<T>) => ( <Context.Consumer>{(value: T) => <Observer>{() => props.children(value)}</Observer>}</Context.Consumer> ) } } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#471 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhIpZ-93qS2vfcVBwcULwq2Jfdy0Hks5uA91ZgaJpZM4Tz_4Y> .

[capaj]

Not sure if it belongs to this package, there is a more concise context
mechanism already in the form of Provider / inject, and two mechanisms to
offer the same thing is often confusing for others

@mweststrate yep it might be confusing for beginners, but IMHO the helper @jantimon created does indeed belong to that package.
It's fundamentally different from inject. Inject is a decorator you apply statically on a component. Context on the other hand is dynamically applied in your tree based on what you provide it with.

I'll open up a PR so we can maybe discuss there. I'd love for @urugator to also express how he feels about the createObserableContext helper.

[urugator]

I think the actual problem is the original Consumer API. It doesn't compose very well and it's somewhat cumbersome to use. I think I have read somewhere that we're supposed to extract Provider/Consumer logic into seperate components/HOCs so that our "normal" components don't depend on context directly, which makes sense from reusability and testability perspective I guess.
So we end up with something like ThemeProvider/WithTheme(Something). Such design would limit the problems with observers I presume. However it can be PITA if you use context extensively.
I have personally ended up using this abstraction:

consumer({
  prop1: Context1,
  prop2: Context2,
})(MyComponent);

The impl for anyone interested:

function consumer(ctxs) {
  return (component) => {
    const keys = Object.keys(ctxs);
    const consume = keys.reduceRight((inner, key) => {
      return props => React.createElement(ctxs[key].Consumer, null,
        value => inner({
          ...props,
          [key]: value,
        }),
      )
    },
      (props) => React.createElement(component, props)
    )

    function Consumer(props) {
      return consume(props);
    }

    Consumer.displayName = `Consumer(${component.displayName || component.name || 'Component'})`;

    return Consumer;
  }
}

That being said I think this will become no-issue with hooks as they make consuming context much easier.
So I would personally wait for hooks before introducing any workarounds in mobx.

About createObservableContext itself:
I am not sure about the name - it doesn't make anything observable, it makes part of the context - the consumer - observer.
I don't like that it introduces abstraction over the whole context object (technically it's no longer context), while we only need a consumer (I see it's convenient, but it just doesn't seem right to me).