[mobx-react] Reference legacy context from functional component

[aiingstan]

Hi, I'm trying to reference context (legacy API) from a functional component (https://reactjs.org/docs/legacy-context.html#referencing-context-in-stateless-function-components), which wrapped with observer. Something like this:

const BookComponent = (props, context) => {
  //.. context is empty object here while using observer.
  return () => <div></div>
}
BookComponent.contextTypes = { ctx1: () => null }

export const Book = observer(BookComponent)

// Without observer, able to get context correctly
// export const Book = BookComponent

Why after wrapping the component with observer, context is unexpected empty object? How should I do in order to get it correctly?

[kubk]

With functional components you should use useContext hook. It's described in the documentation: https://mobx.js.org/react-integration.html#using-external-state-in-observer-components

[aiingstan]

Yeah I understand that the new context API is more easy to use for FC, I have used it in other repositories. However, now I'm creating a FC inside an existing repository which defines the context using the legacy API, I was happy when I know FC still can get the legacy context from the 2nd positional parameter, but wondering why it failed after wrapping it with observer.

[urugator]

Dunno if we actually support this, but we do pass the second arg:

mobx/packages/mobx-react-lite/src/observer.ts

Lines 56 to 58 in 17997c2

	const wrappedComponent = (props: P, ref: React.Ref<TRef>) => {
	return useObserver(() => baseComponent(props, ref), baseComponentName)
	}

Note the observer implicitly uses memo, so IIRC it may prevent propagation of context changes.
Can you setup a codesandbox repro?

[aiingstan]

Here you go @urugator https://codesandbox.io/s/vigilant-mendel-qhbi3?file=/src/Book.js. Thanks!

[urugator]

I think it's fixable, but you will have to set contextTypes before applying observer, I will look into it later.
For the time being can't you create an adapter component that consumes legacy API and exposes the value through new API (considering hooks are available), I think that would be a more forward compatible solution.

[aiingstan]

Yes I agree, that approach also flashed across my mind. 😄 Anyway, I'm able to find a walkaround to my needs now, only curious and want to know why this is happening.
If there's an simple approach, for example, your suggestion - to define contextTypes before wrap the component with observer, I would like to learn it. (Actually I defined ReactiveBook2, which tried this approach).

[urugator]

to define contextTypes before wrap the component with observer

This is only considering we would firstly fix observer impl. Nothing you can do about it on your side. The contextTypes must be defined on the component prior applying memo. So we probably just have to move contextTypes from your component to our wrapperComponent and apply memo afterwards. We do hoist static props, but on already memoized component, so that doesn't do the trick.

[urugator]

https://github.com/mobxjs/mobx/pull/3172/files

[aiingstan]

Well done! Thank you!

[aiingstan]

One question, can we add the support for mobx-react as well?

[urugator]

mobx-react uses mobx-react-lite, it's automatically supported in both.

[aiingstan]

I see, that's great, thanks!