diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index d2e5b17f..c049fc49 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -124,37 +124,19 @@ The `React.lazy` function lets you render a dynamic import as a regular componen ```js import OtherComponent from './OtherComponent'; - -function MyComponent() { - return ( -
- -
- ); -} ``` **After:** ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); - -function MyComponent() { - return ( -
- -
- ); -} ``` -This will automatically load the bundle containing the `OtherComponent` when this component gets rendered. +This will automatically load the bundle containing the `OtherComponent` when this component is first rendered. `React.lazy` takes a function that must call a dynamic `import()`. This must return a `Promise` which resolves to a module with a `default` export containing a React component. -### Suspense {#suspense} - -If the module containing the `OtherComponent` is not yet loaded by the time `MyComponent` renders, we must show some fallback content while we're waiting for it to load - such as a loading indicator. This is done using the `Suspense` component. +The lazy component should then be rendered inside a `Suspense` component, which allows us to show some fallback content (such as a loading indicator) while we're waiting for the lazy component to load. ```js const OtherComponent = React.lazy(() => import('./OtherComponent'));