Styjun

I have a simple components:

const Sidebar = (props) => ... 
const SidebarLink = (props) => ... 

To avoid bloat in imports I want to do simple namespacing:

Sidebar.propTypes = propTypes
Sidebar.Link = SidebarLink
export default Sidebar

And use it like:

<Sidebar>
 <Sidebar.Link>...</Sidebar.Link>
 <Sidebar.Link>...</Sidebar.Link>
 <Sidebar.Link>...</Sidebar.Link>
</Sidebar>

Question:

Are there any cons for this approach?
Can somethings go wrong?
Is it fine as a whole?

Thanks

Personally I find it generally adds more complexity than they are worth, but this article discusses som potential upsides and drawbacks on using sub-components in React in more detail. Article found here.

I have used this approach quite often when I was earliest stage of learning React.

Here's how I did:

export const Sidebar = (props) => ... 
export const SidebarLink = (props) => ... 

And when we needed to use them:

import * as Sidebar from '...' // path to the exports
<Sidebar.Sidebar>
 <Sidebar.SidebarLink>...</Sidebar.Link>
 <Sidebar.SidebarLink>...</Sidebar.Link>
 <Sidebar.SidebarLink>...</Sidebar.Link>
</Sidebar.Sidebar>

But it looks a little uglier in your case. Here's what I'd have used this approach: (Just an example)

<Sidebar.ExportOne />
<Sidebar.ExportTwo />
<Sidebar.ExportThree />

When I used this approach exactly?

I used this approach whenever I need to use several components:

// ComponentOne.js
export const ComponentOne = () => 


// ComponentTwo.js
export const ComponentTwo = () => 


// ComponentThree.js
export const ComponentThree = () => 

// ...

// ComponentIndex.js
export ComponentOne from 'ComponentOne'
export ComponentTwo from 'ComponentTwo'
// ...

And now using it in separate component. So, it's be better to import all rather than using import statement a huge number of lines:

import * as ComponentAll from 'ComponentIndex'
<ComponentAll.ComponentOne />
<ComponentAll.ComponentTwo />
...

But obviously, there's one big con while using this approach, this will impact on performance. Continue reading below to see it why:

You'll be importing all of the components even though, you'll not be using some component. For eg.:

// PlaceOne.js
<ComponentAll.ComponentOne />
<ComponentAll.ComponentThree />

// PlaceTwo.js
<ComponentAll.ComponentTwo />
<ComponentAll.ComponentFive />

So, you're importing all exported components in the PlaceOne.js and PlaceTwo.js.

To avoid this con, use import statement like:

import 
 ComponentOne,
 ComponentTwo,
 // ... import only required component
 from 'ComponentIndex'
// Now, you can simply use:
<ComponentOne />
<ComponentTwo />

This concludes that using <ComponentOne /> rather than <ComponentAll.ComponentOne /> is better approach. And also, we will not loose code splitting advantage while using <ComponentOne /> approach.

The pros and cons of certain methods are subjective, in my opinion it is better to export both components because i don't think there is an overhead in doing so. Considering component reuse, or code maintenance if something were to change as well as the tendency to follow this approach for larger components,

I wouldn't recommend this approach even for simple components.