Named versus Default exports

During a technical interview, I realized I was unsure of the difference between named and default exports and imports. It's not that this concept was tricky to me but mostly that I never bothered to look it up. I just copied whatever was in the codebase at the time or let my prebuilt snippets dictate what practice I was going to follow. I'm sure I even mixed and matched in the same codebase.

So I decided to look this up and write an article to teach myself and anyone else that was curious.

Default exports

Files are only allowed to have a single default export. To default export a React component for example we use the default keyword. Below is how I normally use default exports and probably to most common syntax.

// Navbar.js
const Navbar = () => {
    return <nav></nav>
}

export default Navbar

Another way to write that is:

// Navbar.js
export default function Navbar() {
    return <nav></nav>
}

You'll notice that this way you can define the function and export the component in one line. This is convenient but you can't use the arrow function syntax which is important for the this keyword in React.

So if you want to use a default export I would suggest using the first code block syntax.

Now let's look at how to import a default export in another file.

// Layout.js
import Navbar from "./Navbar"

// import with whatever name you want when using default export
import ExampleDefaultNavbar from "./Navbar"

One interesting thing you can do when importing a default export component is to call it whatever you like. Notice in the example above that you can import the component under the name ExampleDefaultNavbar instead. A similar thing can be done with named exports but we'll talk about the difference in syntax later.

Named exports

Files are only allowed to have a single default export but they can have as many named exports as you want.

// Navbar.js
export const Navbar = () => {
    return <nav></nav>
}

export const NavbarLink = () = {
    return <a></a>
}

Above we have a single file Navbar.js with two different named exports, Navbar and NavbarLink. I've found named exports are a popular choice when it comes to utility files.

The import syntax for named exports is a bit different from default exports.

// Layout.js
import { Navbar, NavbarLink } from "./Navbar"

// Rename an export with the as keyword
import { Navbar as ExampleNamedNavbar, NavbarLink } from "./Navbar"

With named exports, you need to use the same variable name when you import and export, and you need to wrap the variable in {}. If you want to rename the component you have to use the as keyword.

When to use

As with a lot of things in programming, the answer is it depends. But the good news is, both are fine. You could even mix and match in the same codebase or even the same file. Although I don't suggest this since it can get a bit confusing. You should decide as a team and stick to that across your components.

One minor thing that can one above the other is that when using named exports the name is normally consistent across files. As seen above, when you import a component that uses export default there isn't a strict requirement when it comes to naming.

That means that you could import a component that's been default exported from the Navbar.js file as Navbar. But someone else might import that same component under the name NavBar and so on.

While this isn't a big deal and it shouldn't break anything it can be a bit confusing and lead to inconsistencies across the codebase.