MENU


React.lazy()

React.lazy() renders an imported component dynamically.

The fallback prop accepts any React elements to be rendered while the site is waiting for the component to load.Below, if the module fails to load (for example, due to network failure), it will trigger an error, which will, in turn, allow the Error Boundary (6.4) to show a nice user experience.
RESETRUNFULL
import React, { Suspense } from 'react';import MyErrorBoundary from './MyErrorBoundary';const OtherComponent = React.lazy(() => import('./OtherComponent'));const AnotherComponent = React.lazy(() => import('./AnotherComponent'));const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>);

(React.lazy() is not yet available for server-side rendering.)