Is it bad practice to export all components into an index.js file?

Question

I export all components to an index.js file. This means that I can import components into any other file by doing the bellow. This is simple and cleaner.

import { RocketCard, Container, Navbar, Button01 } from './Components/index';

This is what my index.js file looks like. Here I import and export all components.

import { RocketCard } from "./Cards/RocketCard"
import { SmallLabel } from "./SmallLabel"
import { StatusLabel } from "./StatusLabel"
import { Button01 } from "./Button01"
import { List } from "./hoc/List"
import { SearchBar } from "./SearchBar"
import { Container } from "./Layout/Container"
import { Navbar } from "./Layout/Navbar"

export { RocketCard }
export { SmallLabel }
export { StatusLabel }
export { Button01 }
export { List }
export { SearchBar }
export { Container }
export { Navbar }

Is this bad practice? Will it slow down my app in any way?

Thanks.

Whether it's good or bad practice is a matter of opinion. But you can certainly do it more directly: `export { RocketCard } from "./Cards/RocketCard";` (etc.). — T.J. Crowder, Mar 01 '22 at 18:36
@T.J.Crowder Thanks for this great pointer. Have added this throughout my project and it's cleaned it up. — JackMcz, Mar 01 '22 at 19:24

score 1 · Answer 1 · answered May 22 '22 at 12:55

It is difficult to say which is correct, it depends on the project and the arrangements in the team. I'm just saying what I would do and my opinion.

I think it's not right to specify everything in one file, because of this, structure is lost, in a large project this is important.

Yes, now you can import everything from one file, but creating a structure in the form of files and folders is a simple but important thing.

I'll give you an example. When I import BUTTON and see in the import path that it is from the shared folder, then I understand that this is a shared button that is used everywhere. But I can also import BUTTON from the HERO-BANNER folder and understand that this is a unique button for the HERO component. Something as simple as the import path makes life a little easier.

I am not suggesting that you abandon this idea, but I suggest changing it a bit.

I see you have a 'Cards' folder, great, create an index.js inside it and export components from the Cards folder that are needed elsewhere.

Same with the 'HOC' folder.

I see you have 4 components in the same file as the current Index.js file. I understand these are common components. I suggest creating a shared folder and putting them in there and creating an index.js file there with the export of these shared components.

Do the same with the 'layout' folder, create your own component export file there.

In general, the idea is good, but it needs a little detail.)

// Create index.js file inside Cards folder with this content.
export { RocketCard } from './RocketCard'

// Create index.js file inside HOC folder with this content.
export { List } from './List'

// Create shared folder and index.js with this content in shared folder
export { SearchBar } from './SearchBar'
export { SmallLabel } from './SmallLabel'
export { StatusLabel } from './StatusLabel'
export { Button01 } from './Button01'

// Create index.js file inside Layout folder with this content.
export { Container } from './Container'
export { Navbar } from './Navbar'

Is it bad practice to export all components into an index.js file?

1 Answers1