Understanding export vs export const in JavaScript and React

If you've worked with JavaScript or React for even a little while, you've probably seen different ways of exporting things from a file. For example:

export default function MyComponent() { ... }

export const MyComponent = () => { ... }

Or maybe:

const MyComponent = () => { ... };
export default MyComponent;

At first glance, these might all feel the same. But under the hood, they behave a bit differently. Let’s take a closer look at what these export types actually do, when to use them, and how they affect your code.

What does export do?

In JavaScript, export is part of the ES6 module system. It allows you to make parts of a file (like functions, variables, or classes) accessible in other files using import. Without exports, everything inside a file stays private to that file.

There are two main types of exports:

1. Named exports (using export const, export function, etc.)

2. Default exports (using export default)

Named Exports (export const, export function, etc.)

Named exports let you export multiple things from the same file. You must import them using the exact names you used when exporting.

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Then in another file:

import { add, subtract } from './math';

You can even choose to import just one:

import { add } from './math';

Under the hood, named exports are exported as properties on an object. So if you log what you get from importing with * as, you'll see something like:

import * as math from './math';
console.log(math); // { add: [Function], subtract: [Function] }

This object-based export structure makes it easier for tools like bundlers to analyze what's used and remove the unused parts. That’s where tree-shaking comes in.

Default Exports

Default exports are used when you want to export just one thing from a file. You don’t need to name it the same when importing.

export default function log(message) {
  console.log(message);
}

You can import it with any name:

import log from './logger';

Under the hood, a default export is just the value assigned to the default property of the module’s exports object.

This means that a module can only have one default export. If you try to declare more than one, you'll get a syntax error.

Combining Named and Default Exports

Sometimes you’ll see both in the same file, especially in utility libraries or component libraries.

export const helper = () => { /*...*/ };

const mainFunction = () => { /*...*/ };
export default mainFunction;

This is valid, but it can sometimes lead to confusion. If you're building a shared component or utility library, it’s often a good idea to stick to either named exports or a default export for consistency.

How This Applies to React

In React, you often see both styles:

// Named export
export const Button = () => <button>Click</button>;

// Default export
export default function Button() {
  return <button>Click</button>;
}

If you’re exporting just one main component per file, default export makes sense. It keeps imports simple:

import Button from './Button';

If you’re exporting multiple components or utility functions from a single file, named exports are clearer:

export const Button = () => { ... };
export const Icon = () => { ... };

Then:

import { Button, Icon } from './components';

What About Performance?

From a runtime performance perspective, there's no difference between named and default exports. But when it comes to bundling and tree-shaking during your build process, named exports have an edge.

Tree-shaking works by analyzing the dependency graph and removing unused exports. Named exports are easier for bundlers to track and eliminate if they’re not used. Default exports are a bit trickier, because they can be renamed and don’t provide the same level of static analysis.

So if you’re building a library or a large app where bundle size matters, named exports might help keep your build leaner.

Best Practices

• Use default export if your file exports one main thing.

• Use named exports if you have multiple exports from a file.

• Stay consistent within a codebase. It makes collaboration easier.

• For libraries, prefer named exports for better tree-shaking.

Final Thoughts

While export and export const might look similar, they carry different implications in how your code is imported, organized, and bundled. Understanding the differences can help you write clearer, more modular code and in some cases, even improve performance. As your projects grow, being intentional with your exports becomes more important.

So the next time you're exporting a function or component, pause and ask: should this be a named export or a default one?

- Jagadhiswaran Devaraj

📢 Stay Connected & Dive Deep into Tech!

🚀 Follow me for hardcore technical insights on JavaScript, Full-Stack Development, AI, and Scaling Systems:

🐦 X (Twitter): jags

✍️ Read more on Medium: https://medium.com/@jwaran78

💼 Connect with me on LinkedIn: https://www.linkedin.com/in/jagadhiswaran-devaraj/

Let’s geek out over code, architecture, and all things in tech! 💡🔥