React context in MPA (one context for different apps)

Question

React context in MPA (one context for different apps)

369 Views Asked by Kotanet At 04 April 2025 at 01:06

I'm rendering several react "snippets" on one page

ReactDOM.render(<MainNavSearchApp />, document.getElementById('main-nav-search-app'));
ReactDOM.render(<NavSearchBrandsApp />, document.getElementById('main-nav-search-brands-app'));

and want to use one context for them

class MainNavSearchApp extends React.Component {
    render() {
        return (
            <div>
                <NavSearchContextProvider>
                    <MainNavSearch />
                </NavSearchContextProvider>
            </div>
        );
    }
}
export default MainNavSearchApp; 

class NavSearchBrandsApp extends React.Component {
    render() {
        return (
            <div>
                <NavSearchContextProvider>
                    <NavSearchBrands />
                </NavSearchContextProvider>
            </div>
        );
    }
}

export default NavSearchBrandsApp;

but if I update the context in on of the apps, it does not get updated in the other. As I understand, React creates two "clone" independent contexts. Can multiple instances use the same context?

Original Q&A

There are 1 best solutions below

**Dennis Vash** · Accepted Answer

Yes you can, as data in React flows down, they must have a common parent in order to share same context data.

This is commonly called a “top-down” or “unidirectional” data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree.

Therefore, the common parent should use ReactDOM.createPortal, and render the provider, while other components will be his children.

<body>
    <div id="root"></div>
    <div id="app1"></div>
    <div id="app2"></div>
</body>

// Common parent - MUST
function Root() {
  return (
    <Context.Provider value={42}>
      {ReactDOM.createPortal(<App1 />, document.getElementById("app1"))}
      {ReactDOM.createPortal(<App2 />, document.getElementById("app2"))}
    </Context.Provider>
  );
}

// MainNavSearchApp
function App1() {
  const val = React.useContext(Context);
  return <>App1: {val}</>;
}

// NavSearchBrandsApp
function App2() {
  const val = React.useContext(Context);
  return <>App2: {val}</>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Root />, rootElement);

React context in MPA (one context for different apps)

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in REACT-HOOKS

Related Questions in REACT-CONTEXT

Trending Questions

Popular # Hahtags

Popular Questions