CODEWITHSUNDEEP
javascriptreactjs
n1stre
n1stre

Reputation: 6086

Cons of using compound components

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

Upvotes: 4

Views: 1622

Answers (3)

jensmtg
jensmtg

Reputation: 506

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.

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

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.

Upvotes: 4

mark edosa
mark edosa

Reputation: 54

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.

Upvotes: 0

Related Questions