Correct way of exposing Store to parent or sibling component?

[lapidus]

I have a NextJS Page that uses a MobX-driven component – <AdvancedMobXComponent /> that does data loading etc.

This particular Page requires a <CustomMiniComponent /> that uses some of the data stored inside the MobX state.

// My page
Page = () => {
  return <>
     <CustomMiniComponent />
     <AdvancedMobXComponent />
  </>
}

It seems I could import the StoreProvider and redefine it at the top:

// My page

import { StoreProvider, useStore } from "./Store"

Page = () => {
  return <>
     <StoreProvider>
       <CustomMiniComponent />

     
       <AdvancedMobXComponent>
               //This is defined inside the component:
             <StoreProvider initialStore={initialStore}>
             </StoreProvider>
         </AdvancedMobXComponent>
   
     </StoreProvider>
  </>
}

But this leads to StoreProvider inside a StoreProvider (where the inner/original is responsible for the initial state).

Another option I guess is to accept custom Children and pass them like so:

 <AdvancedMobXComponent>
       <CustomMiniComponent />
</AdvancedMobXComponent>

But this might make the layouting too complex as the <CustomMiniComponent /> is to be displayed in another part of the application and should just access & interact with the state of <AdvancedMobXComponent />.

Are these anti-patterns? Are there better ways to expose the Store to a parent or sibling component?

[urugator]

You should move the state with data loading etc to a common ancestor. You shouldn't even try to expose a state owned by child to it's parent or to it's siblings. React introduced hooks so that you can easily decouple state/effects from a particular component and make this kind of refactoring trivial.
https://reactjs.org/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live
https://reactjs.org/docs/lifting-state-up.html

[lapidus]

Thank you, I understand that I should normally locate the data loading with a common ancestor.

But this is perhaps a bit of an edge case where I have a stand-alone MobX component which is used in 100s of places and has a lot of internal complexity already. And I want to make a small custom component that is only used in one place without polluting or refactoring an already functional component. So basically I want to create this little extra “one-off controller” of something that is going on inside a large MobX component.

Exposing a custom hook is perhaps the way to go?

[codeBelt]

Take a look at my Next.js/MobX example for ideas https://github.com/codeBelt/mobx-local-global-stores