React.lazy

React.lazy

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

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

Lets you render a dynamic import as a regular component.

Named Exports

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;

// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";

// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default.

Related concepts

→
React.lazy
→

React.lazy — Structure map

Clickable & Draggable!

React.lazy — Related pages:

Code-Splitting