Default export vs named: when each one fits

Default export — one main thing per file

// Button.js
export default function Button(props) { /* ... */ }

// or
export default class Button { /* ... */ }

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

// app.js
import Button from "./Button.js";    // no curlies — the importer names it

There's exactly one default export per file. The importer picks the local name — import Btn from "./Button.js" works too. That's the trade-off: convenience vs grep-ability.

Mixing default and named

// http.js
export default function fetchJSON(url) { /* main thing */ }
export const TIMEOUT_MS = 5000;
export function fetchText(url) { /* secondary thing */ }

import fetchJSON, { TIMEOUT_MS } from "./http.js";

The default is the "main thing." Named exports stand for everything else.

When to use which

• Default — when the file is fundamentally about ONE thing (a React component, a class, the entry point of a library).
• Named — when the file exports a set of utilities at the same level (format.js exports formatDate, formatCurrency, formatPercent).
• Avoid mixing default + named in the same file once the named set grows past 2-3 things. Refactor the file into "main + sub-exports" or split it.

React convention

React components use default exports almost universally; hooks use named. That's just convention, not a rule, but it's so universal that breaking it costs reader-attention.