Where is the root of my component hierarchy?

Question

I am creating a modal for my React / Redux application and found some great answers in this post.

One thing I cannot figure out though is where "the root of [my] component hierarchy" is.

My application is structured as below:

app.js

const jsx = (
    <React.StrictMode>
      <Provider store={store}>
        <AppRouter />
      </Provider>
    </React.StrictMode>
)

AppRouter.js

...
return (
  <React.Fragment>
    <LoadingSpinnerFullPage />
    <Router history={history}>
      <Suspense fallback={<LoadingSpinnerFullPage />}>
        <div className="appContainer">
          <Route exact path={SidebarLocation.path} render={(props) => privatePath({component: Sidebar})} />
            <div className="app-MainContent content-container-parent ">
              <Route exact path={HeaderLocation.path} render ={(props) => privatePath({component: Header, ...props})} />
              <Switch>

Where would my component "hierarchy root" be considered to be located?

Is it

directly under <React.Fragment> ?
alongside all routes directly under < Router > ?
at the same level as < AppRouter /> in app.js inside < Provider > ?

If my modal is connected to the redux store listening to modal.isOpen - would placing it in the Router cause re-rendering of my entire app each time the modal is opened or closed?

Many thanks! /K

Dan Prince · Accepted Answer · 2020-11-27T23:15:54.020

The element that you pass to ReactDOM.render is technically the "root" of your component hierarchy, which I'm guessing would be <React.StrictMode> here (assuming you call it with the jsx variable).

If your modal is connected to the Redux store, then it must be rendered somewhere inside the react-redux <Provider> element (even though that's not technically your root here).

I would suggest rendering it as a child of <Provider>, alongside the <AppRouter> component. That's the closest it can be to the root element without having to couple it to one of your other components.

You may need to wrap them both in a fragment to keep the Provider component happy.

const jsx = (
  <React.StrictMode>
    <Provider store={store}>
      <React.Fragment>
        <AppRouter />
        <ModalRoot />
      </React.Fragment>
    </Provider>
  </React.StrictMode>
)

Where is the root of my component hierarchy?

1 Answers1