observer HOC has different type signature between mobx-react and mobx-react-lite

[seivan]

Which is the more accurate and up to date version?

This works with mobx-react-lite used when using "mobx-react": "6.1.8",

const TestingMobxReactLite = observer<{ user: User }>(props => {
    return (
        <p>
          {props.user.name}
        </p>

    );
})

But this fails with an error

const TestingMobxReact = observer<{ user: User }>(props => {
    return (
        <p>
          {props.user.name}
        </p>

    );
})

"message": "Type '{ user: User; }' does not satisfy the constraint 'IReactComponent<any>'.\n  Property '$$typeof' is missing in type '{ user: User; }' but required in type 'ForwardRefExoticComponent<any>'.",

Their type signatures are different.

mobx-react uses

export declare type IReactComponent<P = any> = React.ClassicComponentClass<P> | React.ComponentClass<P> | React.FunctionComponent<P> | React.ForwardRefExoticComponent<P>;

While mobx-react-lite uses

export declare function observer<P extends object, TRef = {}>(baseComponent: React.RefForwardingComponent<TRef, P>, options: IObserverOptions & {
    forwardRef: true;
}): React.MemoExoticComponent<React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<TRef>>>;
export declare function observer<P extends object>(baseComponent: React.FunctionComponent<P>, options?: IObserverOptions): React.FunctionComponent<P>;

Which is the more correct and up to date one?

[danielkcz]

Yea, unfortunately, there are differences. Generally, if your codebase requires classes, then use the mobx-react variant, otherwise, stick to mobx-react-lite only.

[seivan]

@FredyC I am sorry, classes for Observers or Observables? What's the plan ahead, are they going to get merged at some point, or is this split going to stay?

So if I am only using functional components with class observables, should I use mobx-react-lite?

[danielkcz]

The observer is used with components, so no need to worry about class-based observables.

No particular plan, these types are rather tricky when classes are mixed in. And to be honest I don't see a reason. As I said above, if you need both, stick to mobx-react. Otherwise, remove mobx-react and use lite only because it's more lightweight. And if you need Provider / inject you can obviously keep using mobx-react for that, but we recommend migrating away from that.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.