How does a chained export work in react without the components in between actually rendering the component?

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Himanshu Poddar is looking for an : ：

Need explanation for the exact working of this chaining when the middle components are not exactly rendering but just exporting the components

I understood the point that chaining of components can be done by having functional component in every files and importing the components at every parent level.

eg A imports B imports C

Lets say we have these 3 files App.js, Home.js and HomeContainer.js

where App imports Home imports Homecontainer

App.js

import './App.css';
import HomeContainer from './containers/HomeContainer';

function App() {
  return (
    <div className="App">
      <HomeContainer/>
    </div>
  );
}
export default App;

HomeContainer.js

import Home from "../components/Home";
function HomeContainer(props) {
    return (
        <div>
            <Home/>
        </div>
    )
}
export default HomeContainer

Home.js

import React from 'react';

function Home(props) {
    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}

export default Home;

Up until now everything was okay but lets say instead of creating a function component for HomeContainer I exported Home component directly, I see even then it is working.

HomeContainer.js becomes

import Home from "../components/Home";
export default Home

I want to know how exactly this is working, because APP.js is rendering the HomeContainer component but HomeContainer component is not rendering anything like <Home/> but still Home component gets rendered in the APP.js.

I expected App to render first functional component HomeContainer which in turn renders Home component. But even when we don't create a functional component and directly export it, its getting rendered in App.js as Home component when our HomeComponent is not even rendering it using the command <Home/>

How exactly export default in HomeComponent.js is rendering the component Home in parent App.js

Answer 1

When using export default , it doesn't matter what name you give to the imported module.

You are just pointing an identifier to whatever the default export is at the specified path.

---

Default export

In this example, it does not need to be Home , it can be SomeOtherIdentifier and it will still work.

App.js

import './App.css';
import SomeOtherIdentifier from './containers/HomeContainer';

function App() {
  return (
    <div className="App">
      <SomeOtherIdentifier/>
    </div>
  );
}
export default App;

HomeContainer.js

import Home from "../components/Home";
export default Home

---

Named export

On the other hand, if you were to use a named export , you would need to import the module with the same name.

App.js

import './App.css';
import { HomeContainer } from './containers/HomeContainer';

function App() {
  return (
    <div className="App">
      <HomeContainer/>
    </div>
  );
}
export default App;

HomeContainer.js

import Home from "../components/Home";
export { HomeContainer }

---

Or you could use the as keyword to alias the imported module to another name.

App.js

import './App.css';
import { HomeContainer as SomeOtherIdentifier } from './containers/HomeContainer';

function App() {
  return (
    <div className="App">
      <SomeOtherIdentifier/>
    </div>
  );
}
export default App;

HomeContainer.js

import Home from "../components/Home";
export { HomeContainer }

Answer 2

The HomeComponent.js is rendering the Home because you told it to do so! You're importing and exporting Home in it.

Think of the second HomeComponent.js as a middleman. It imports and exports another component (module). It's a common thing in JS projects.

See these for complete details:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export https://javascript.info/import-export