From ec0cf5cf2cba77254b4f3e0a28503a3fc747cbea Mon Sep 17 00:00:00 2001 From: Jacob Bandes-Storch Date: Tue, 10 Sep 2019 17:28:27 -0700 Subject: [PATCH] Update CodeSplitting to clarify that lazy() must be used with Suspense (#2306) * Update CodeSplitting to clarify that lazy() must be used with Suspense * Update code-splitting.md --- content/docs/code-splitting.md | 22 ++-------------------- 1 file changed, 2 insertions(+), 20 deletions(-) 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'));