Unable to use {forwardRef: true} option of observer HOC

[ghost]

Intended outcome

I would like to forward a ref to an observed component as per my current understanding of https://mobx-react.js.org/observer-hoc

const MyObserverComponent = observer(
  (props, ref) => {
    return <div ref={ref}>My Observer Component</div>;
  },
  { forwardRef: true }
);

Actual outcome

As per codesandbox below, React chokes:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Warning: Unexpected ref object provided for div. Use either a ref-setter function or React.createRef().

The above error occurred in the

component:
in div (at App.js:29)
in _c4 (at App.js:18)
in div (at App.js:16)
in App (at src/index.js:9)
in StrictMode (at src/index.js:8)

How to reproduce the issue

https://codesandbox.io/s/inspiring-colden-uettu?file=/src/App.js

Versions

react: 16.12.0
mobx: 5.15.4
mobx-react: 6.2.2

[danielkcz]

Thanks for the report. That option works only with mobx-react-lite. However, I don't see any reason why it shouldn't be here as well. I will leave this open and PR is welcome.

[ghost]

Sorry, I'm still trying to grasp the relationship between mobx-react and mobx-react-lite. I appreciate the latter is with hooks.

Am I correct in saying that mobx-react-lite is its own library with a degree of independence from mobx-react and can be used in a hooks only implementation, but since mobx-react includes mobx-react-lite in its packaging, the mobx-react-lite API becomes part of the mobx-react API, but with exceptions (like this example) that may be in mobx-react-lite and not mobx-react but are documented in mobx-react for consistency?

[danielkcz]

That is correct. Perhaps this overview will help you? https://mobx-react.js.org/libraries

The observer in mobx-react is slightly different because it needs to take care of class components too. The forwardRef option was added to mobx-react-lite much later out of specific need and nobody ever asked for it in mobx-react.

Actually, looking at the code, it seems that you should be able to wrap to React.forwardRef directly along with observer call.

[danielkcz]

Yea, here is a quick demo.

https://codesandbox.io/s/xenodochial-wiles-3zvwk?file=/src/App.js

Such inconsistency is of course bad for any future migrations. I am thinking we should probably make it work the same way in mobx-react-lite instead of extra option.

[yuwanlin]

@FredyC thank you, It help me a lot. the demo is useful.
for a function component, It seems

import {  inject } from 'mobx-react';
import { observer } from 'mobx-react-lite';

export default inject('commonStore')(observer(GamePage, {
  forwardRef: true
}));

and

import {  observer, inject } from 'mobx-react';
export default inject('commonStore')(observer(React.forwardRef(GamePage)));

both work.

[MoonBall]

@FredyC From code, there is an intentional behavior for case under discussion.

[danielkcz]

I think you are missing the point here. It should work the same way across both libraries.

[MoonBall]

I think you are missing the point here. It should work the same way across both libraries.

@FredyC I mean the below code should not work because of the code. The comment of source code is for this case. So this case maybe not a bug.

const MyObserverComponent = observer(
  (props, ref) => {
    return <div ref={ref}>My Observer Component</div>;
  },
  { forwardRef: true }
);

[yuwanlin]

@MoonBall the code you mentioned is source code of mobx-react-lite... It work in this case. But mobx-react doesn't work in this case.

[yuwanlin]

Thanks for the report. That option works only with mobx-react-lite. However, I don't see any reason why it shouldn't be here as well. I will leave this open and PR is welcome.

I am very interested in fixing this problem. Is there anything I need to pay attention to?(eg: which version should I fix it?)

[danielkcz]

@yuwanlin I am thinking it should work the other way around and expand mobx-react-lite to work with React.forwardRef directly instead of extra option. And possibly using that option could produce a one-time warning about deprecation and remove it from the next major. So if you are interested in that, go ahead.

[danielkcz]

Even though this issue holds more information, the #2527 is more up to date. Closing this as duplicate.

[pauldasslier]

Hello!
I did same issue and it works for me. Try this:
const MyComponent = compose(inject('profile'), injectIntl)(observer(CommentsCreationField));
export default React.forwardRef((props, ref) => <MyComponent {...props} forwardedRef={ref} />);

This helps me: reduxjs/react-redux#914 (comment)
forwardRef should be outside