liveBook · Manning

Default export

As explained in React Hooks in Action: With Suspense and Concurrent Mode

A default export is the single primary value that a JavaScript module can export for import without requiring a matching exported name.

Designates one primary value a JavaScript module makes available through its default property. A module can have one default export alongside multiple named exports. section 11.1.2

Exporting a utility

A module can expose one function as its default export and another as a named export: `export default function sayMessage(...) { ... }` and `export function sayHi(...) { ... }`. Dynamic imports access them as `module.default` and `module.sayHi`, or through destructuring. section 11.1.2 section 11.1.4

Lazy-loading a component

React.lazy expects the promise from a dynamic import to resolve to a module whose default export is a component: `const LazyCalendar = lazy(() => import("./Calendar.js"));`. A calendar can therefore load when the user first clicks Show Calendar. section 11.2.1

How React Hooks in Action: With Suspense and Concurrent Mode covers it

How deep it goes
Explains declaration, module-object access, destructuring, and lazy-loading requirements without examining module-loader internals.
Examples
Uses message utilities, module destructuring, and a calendar component loaded after a Show Calendar button click.
What it assumes
Assumes familiarity with JavaScript modules and imports while distinguishing default exports from named exports through examples.
What you can do after
Apply it via JavaScript export syntax, dynamic import properties, destructuring, and React.lazy component loading.
How it connects
Connects default exports with named exports, dynamic imports, JavaScript modules, and React.lazy.

Also explained in

Compare how 3 books explain default export →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of React Hooks in Action: With Suspense and Concurrent Mode. The section links point to the parts of the book it draws on.