Automatic observer wrapping

[baeharam]

Generally, many people use MST with React through Context API and root store concept like this.

const ExampleComponent = () => {
  const rootStore = useStore(); // Which return root store containing all other stores
  // ...
}
export default observer(ExampleComponent);

However, there are weak points. We have to write two lines of code when using MST.

1) USE hook to get root store
2) USE observer HOC to watch component

In this context, there are lots of situation when I forget second case. So, its hard to debug why component doesn't get fresh data of some stores.

Is there a way to skip second case that wrapping component with observer HOC? I want automatic observer wrapping when I use hook to get root store. Any hacky way will be welcomed! Thanks 😄

[EmilTholin]

Hi @baeharam!

There was some nice discussion on this topic a while back here.

The creator of Legend-State finished with the following:

I've actually removed this behavior from Legend-State and I recommend you don't pursue it either. We found it to be extremely error prone, completely crashing apps with mismatched number of hooks errors. The errors are easy to reproduce in Next.js with just router.replace(...) in Next.js. I could not manage to figure out a way to solve all of the issues to make it stable. From the looks of the issues in the Signals repo they haven't either.

Also, the React team has asked me not to do it and said it is likely to change in a future version. So all in all it seems like a no-go.

[baeharam]

Hi @EmilTholin ! Thanks for your answer :)

I read discussions of your link and understood that this feature would cause buggy code so it couldn't be applied. Did I understood well? I thought modern state management library like jotai, recoil, etc. These libraries don't need wrapping but just hooks. Is it difference of paradigm?

[EmilTholin]

You're welcome!

Yes, the implementation details and behavior of those libraries are quite different.