~/components vs ~/components/Button

Any opinions on this? Does A affect performance? (importing from a file that exports many other components) A
// ~/components/index.ts
export { default as Button } from './Button'
export { default as Label } from './Label'
export { default as Toggle } from './Toggle'

// ~/components/Button/Button.tsx
export default function Button() { return <button /> }

// ~/components/Button/index.ts
export { default } from './Button'

// ~/pages/index.tsx
import { Button, Label } from '~/components'
// ~/components/index.ts
export { default as Button } from './Button'
export { default as Label } from './Label'
export { default as Toggle } from './Toggle'

// ~/components/Button/Button.tsx
export default function Button() { return <button /> }

// ~/components/Button/index.ts
export { default } from './Button'

// ~/pages/index.tsx
import { Button, Label } from '~/components'
B
// ~/components/Button/Button.tsx
export default function Button() { return <button /> }

// ~/components/Button/index.ts
export { default } from './Button'

// ~/pages/index.tsx
import Button from '~/components/Button'
import Label from '~/components/Label'
// ~/components/Button/Button.tsx
export default function Button() { return <button /> }

// ~/components/Button/index.ts
export { default } from './Button'

// ~/pages/index.tsx
import Button from '~/components/Button'
import Label from '~/components/Label'
13 Replies
Christoph
Christoph15mo ago
Even if one is faster than the other, the performance penalty would be negligible. Also, the way you write it isn't necessarily the way it is run. There are a ton of optimization steps between what you write and what is actually being run.
Mocha
Mocha15mo ago
Right, so I was wondering if those optimizations are good enough to not worry about performance
Christoph
Christoph15mo ago
Performance is not an issue until it is an issue.
cje
cje15mo ago
why are you doing either of these just export function Button() {} and import { Button } from '~/components/Button
Mocha
Mocha15mo ago
Some components may need additional files, like helper functions and so on, so that'd be more like
import Button from '~/components/Button/Button'
import Button from '~/components/Button/Button'
But either way, my question was more about this part
// A
import { Button, Label } from '~/components'
// B
import Button from '~/components/Button'
import Label from '~/components/Label'
// A
import { Button, Label } from '~/components'
// B
import Button from '~/components/Button'
import Label from '~/components/Label'
Rhys
Rhys15mo ago
Do B, barrel exports (exporting everything from one file) make the builder do more work to exclude unused dependencies With B it’s not a problem since you only import what you use
Mocha
Mocha15mo ago
Yes, I don't see a disadvantage here other than having multiple import lines, which I don't really mind, but if it's all exactly the same, I'd prefer A
Rhys
Rhys15mo ago
it's not the same A is worse
Mocha
Mocha15mo ago
I guess where you can really tell the difference is with huge libraries like MUI, and they use default imports in their examples
Rhys
Rhys15mo ago
I just migrated away from A since my bundler wasn't tree shaking properly resulting in me shipping more JS than needed to the client
Mocha
Mocha15mo ago
Yes I don't trust the bundler magic with JS
Mocha
Mocha15mo ago
You can see them always using default imports in their examples: https://mui.com/material-ui/react-button/#buttons-with-icons-and-label
React Button component - Material UI
Buttons allow users to take actions, and make choices, with a single tap.
Want results from more Discord servers?
Add your server