DEV Community

Cover image for Default Exports vs Named Exports
Vladimir Vovk
Vladimir Vovk

Posted on

2

Default Exports vs Named Exports

export default function A() {}

// vs

export function A() {}
Enter fullscreen mode Exit fullscreen mode

I think that both methods are good. But I can see some advantages of named exports.

Named exports will not allow to implicitly change the import name

// No error with default export
import Button from '../components/Text'
// now we have a "Button" component 
// which is actually a "Text" component

// TypeScript will throw and error 
// if import and export names don't match
import { Button } from '../components/Text'
// we will get an error here
Enter fullscreen mode Exit fullscreen mode

Named exports are easier to re-export and organise

Imagine we have several UI components inside components folder. Each component in a separate file: components/Header.tsx, components/Text.tsx, components/Button.tsx, etc.

Now to be able to import these components as import { Header, Text, Button } from '../components' we just need to create the components/index.ts.

export * from './Header'
export * from './Text'
export * from './Button'
Enter fullscreen mode Exit fullscreen mode

Compare to the default exports where will need to write:

export { default as Header } from './Header'
export { default as Text } from './Text'
export { default as Button } from './Button'
Enter fullscreen mode Exit fullscreen mode

Named exports are shorter to write

export function Component() {}
// or 
export const Component = () => {}
Enter fullscreen mode Exit fullscreen mode

Compared to default exports:

export default function Component() {}
// or 
const Component = () => {}
export default Component
Enter fullscreen mode Exit fullscreen mode

If you have any questions or comments, please post them below, press 💖 button and happy hacking! 🙌🏻

Credits

Photo by Sergey Sokolov on Unsplash

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay