✅ Default vs Named Exports in React (and JavaScript)

In modern JavaScript (and especially in React projects), you’ll often see two kinds of exports: default exports and named exports. Both are used to share code between files, but they behave differently and come with their own pros and cons.

🚀 Syntax & Basic Behavior

Let’s start with some concrete examples:

// MyButton.js
export default function MyButton(props) {
  return <button {...props} />;
}

// import
import MyButton from './MyButton';

Default export: No braces required, and you can name it whatever you like.

// utils.js
export function formatDate(d) { ... }
export const PI = 3.14;

// import
import { formatDate, PI } from './utils';

Named exports: Must use curly braces and match the exported name (or rename using as).

🧠 Import Differences

TypeImport StyleExampleDefault ExportAny name, no bracesimport MyBtn from './MyButton';Named ExportBraces required, exact match (or alias)import { formatDate as fmt } from './utils';

🔢 One vs Many

Default: Only one per file.
Named: Unlimited exports allowed.
Named exports are natural when you’re building utility files with multiple helpers.

📦 Re-exports & Barrels

You can gather exports from multiple files into a single entry point (often index.js):

// Re-export default as named
export { default as MyButton } from './MyButton';

// Re-export named
export { formatDate } from './utils';

This pattern, called a barrel, makes imports cleaner for consumers.

🌲 Tree-Shaking & Performance

Named exports are more tree-shaking friendly, meaning bundlers can remove unused exports more reliably. Default exports may cause bundlers to include more code than necessary in some cases, though modern tools handle it well.

⚛️ React.lazy and Dynamic Imports

React.lazy expects a default export:

const LazyComp = React.lazy(() => import('./MyComponent'));

If you only have a named export, you must wrap it:

const LazyComp = React.lazy(() =>
  import('./module').then(mod => ({ default: mod.NamedComponent }))
);

📘 TypeScript Notes

TypeScript supports both default and named exports. Teams often prefer named exports for clarity and easier refactoring. Example:

export type Props = { label: string };
export default function Button(props: Props) { ... }

⚖️ Pros & Cons

TypeProsConsDefault ExportConcise imports, easy to rename, good for one-component files.Harder to know what’s exported, less friendly for tree-shaking in some cases.Named ExportExplicit API, safer refactors, better tree-shaking.Requires braces, imports must match export names.

✅ Best Practices

Use named exports for libraries or utility modules with multiple exports.
Use default export for a single primary export (common in React component files).
Be consistent across your codebase—consistency is more important than strict rules.

📂 Example File Structure

/components
  Button.js         // default export Button
  index.js          // export { default as Button } from './Button'

/utils
  date.js           // export function formatDate() {..}
  math.js           // export const add = () => {}
  index.js          // export * from './date'; export * from './math';

🧾 Conclusion

Both default exports and named exports are powerful features in JavaScript and React. Use default exports for single, primary exports (like one React component per file) and named exports for utility-heavy files or libraries. If you stick to a consistent pattern, your codebase will be cleaner, easier to maintain, and more tree-shaking friendly.

Default vs Named Exports in React: Key Differences Explained