amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-25 23:05:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update CodeSplitting to clarify that lazy() must be used with Suspense (#2306)

Browse Source 
* Update CodeSplitting to clarify that lazy() must be used with Suspense

* Update code-splitting.md
This commit is contained in:
Jacob Bandes-Storch
2019-09-10 17:28:27 -07:00
committed by Alex Krolick
parent 8977759578
commit ec0cf5cf2c
1 changed files with 2 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
content/docs/code-splitting.md
View File

@@ -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 (
<div>
<OtherComponent />
</div>
);
}
```
**After:**
```js
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
```
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'));