Skip to content

Commit 6c10801

Browse files
authored
Update code-splitting.md (#1972)
Added some clarity.
1 parent 79d33df commit 6c10801

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

content/docs/code-splitting.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,8 @@ This will automatically load the bundle containing the `OtherComponent` when thi
132132
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.
133133

134134
```js
135+
import React, { Suspense } from 'react';
136+
135137
const OtherComponent = React.lazy(() => import('./OtherComponent'));
136138

137139
function MyComponent() {
@@ -148,6 +150,8 @@ function MyComponent() {
148150
The `fallback` prop accepts any React elements that you want to render while waiting for the component to load. You can place the `Suspense` component anywhere above the lazy component. You can even wrap multiple lazy components with a single `Suspense` component.
149151

150152
```js
153+
import React, { Suspense } from 'react';
154+
151155
const OtherComponent = React.lazy(() => import('./OtherComponent'));
152156
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
153157

@@ -170,7 +174,9 @@ function MyComponent() {
170174
If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](/docs/error-boundaries.html). Once you've created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there's a network error.
171175

172176
```js
177+
import React, { Suspense } from 'react';
173178
import MyErrorBoundary from './MyErrorBoundary';
179+
174180
const OtherComponent = React.lazy(() => import('./OtherComponent'));
175181
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
176182

@@ -203,8 +209,8 @@ Here's an example of how to setup route-based code splitting into your app using
203209
libraries like [React Router](https://reacttraining.com/react-router/) with `React.lazy`.
204210

205211
```js
206-
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
207212
import React, { Suspense, lazy } from 'react';
213+
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
208214

209215
const Home = lazy(() => import('./routes/Home'));
210216
const About = lazy(() => import('./routes/About'));

0 commit comments

Comments
 (0)