Mobx: Question: React HOC for useObservable hook from mobx is not reacting to changes

[tudordumitriu]

Hi
I am trying to create a react HOC for useObservable hook from mobx but it is not reacting to changes.

Working code:

const MobXItemsList = () => {
  const store = useContext(MobxDataStore);
  return useObserver(() => (
    <ItemsList
      customers={store.customers}
      initialized={store.initialized}
      length={store.customers.length}
    />
  ));
};
export default MobXItemsList;

Version with HOC which is NOT working (not reacting/observing to any changes):

const withObserverMobx = Component => () => {
  const store = useContext(MobxDataStore);
  return useObserver(() => <Component store={store} />);
};

export default withObserverMobx(({ store }) => {
  return (
    <ItemsList
      customers={store.customers}
      initialized={true}
      length={store.customers.length}
    />
  );
});

Much appreciated!

[FredyC]

Why are you reinventing the wheel when you can have a look at our observer HOC and modify the code for your needs? https://github.com/mobxjs/mobx-react-lite/blob/master/src/observer.ts

It's hard to tell what's wrong here without proper reproduction.

[urugator]

return useObserver(() => <Component store={store} />);
=>
return useObserver(() => Component({ store }));

[mweststrate]

observer only listens to changes in _THIS_ component. Since, in your HoC, nothing is used in THIS component (since it is just a stable store reference), the HoC won't be tracking anything, while the original component was using customers, initialized etc. For that reason @urugator's solution work, as the component is no longer split into two different components. (Although one could consider calling Component as a function instead of as component a confusing pattern)

[urugator]

(Although one could consider calling Component as a function instead of as component a confusing pattern)

It's what this lib does...
Since he opted for useObserver, I presume he doesn't want to support classes ... so memo/ref/name handling aside, he can do just the same thing as we do...

[mweststrate]

I know :) I more meant to say it might be confusing to read for readers of
this code. Although these kind of HoCs are typically utilities stuffed
somewhere away, so I guess it's fine as long as the difference between the
two constructions is clear and intentional.

On Mon, Oct 21, 2019 at 10:02 PM urugator [e-mail] wrote:

(Although one could consider calling Component as a function instead of as
component a confusing pattern)

It's what this lib does...
https://github.com/mobxjs/mobx-react-lite/blob/a6bc7c225c7bb495840d9b972f84b9273e2b2879/src/observer.ts#L37
Since he opted for useObserver, I presume he doesn't want to support
classes ... so memo/ref/name handling aside, he can do just the same thing
as we do...

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/2170?email_source=notifications&email_token=AAN4NBEI6MOXID2I6IAPUULQPYKFHA5CNFSM4JCSOWJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEB3Y5VY#issuecomment-544706263,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAN4NBB5AMSMMXSWX7JL7ETQPYKFHANCNFSM4JCSOWJA
.

[tudordumitriu]

Thank you @urugator
Actually I was experimenting but I found it kind of limiting not being able to create the HOC that reacts to changes, but thanks to @mweststrate explanation it does make sense and yes, it's a bit confusing calling the component that why it didn't cross my mind, but it gets the job done.

[urugator]

Just in case it's not obvious, you can create the same HOC using observer:

const withObserverMobx = Component => {
  const ObserverComponent = observer(Component);
  return () => {
    const store = useContext(MobxDataStore);
    return <ObserverComponent store={store} />;
  };
}

[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.