multiple instances of a store in React

[noname-username]

My colleague and I are having a discussion about the correct way to inject stores into our React app. His solution is to simply import them into the components like this:

My problem with this approach is I don't understand how this doesn't initialize multiple instances of the same store when that store is imported into different components, isn't new Store() statement initializing a new instance of the class? Does some internal mobx logic take care of this? I can't find any info about it. I personally use provider in my projects but my colleague is not convinced because his approach seems to be working fine. So, what is the correct way to inject stores into React apps in 2021?

[kubk]

I don't understand how this doesn't initialize multiple instances of the same store

It's not about Mobx. JS modules can be stateless and stateful. Stateless modules export functions or classes. Stateful modules export objects. Node.js also supports it: https://gist.github.com/ccnokes/dffe1778059d168ad3cb9c3ee751203a
On your screenshot you created singleton that's why it works.

Regarding injecting store in 2021 there are no common rule. You can choose Context API + hooks or singleton modules. Singleton approach won't work in SSR. Node.js process is initialized once and you get shared singleton state between all the HTTP requests which is incorrect.

[noname-username]

Thank you!

[urugator]

@kubk is correct, but I find the description a bit misleading - all modules are evaluated only once and cached no matter what they export. A class/function has properties, which makes it automatically "stateful" or it can contain side effect:

let state = 0;
export function stateful() {
  state++;
  return "hello";
}

So a "stateless" module is a module that would work the same way without the module cache, but JS engine does not differentiate between the two.