From 6c108015aeaaaec7b92a10a40194a8f95a3cb8ae Mon Sep 17 00:00:00 2001
From: Carl A Lewis <nemesisesq@gmail.com>
Date: Mon, 9 Mar 2020 10:54:30 -0400
Subject: [PATCH] Update code-splitting.md (#1972)

Added some clarity.
---
 content/docs/code-splitting.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 392108a9..e56509b8 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -132,6 +132,8 @@ This will automatically load the bundle containing the `OtherComponent` when thi
 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
+import React, { Suspense } from 'react';
+
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
 
 function MyComponent() {
@@ -148,6 +150,8 @@ function MyComponent() {
 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.
 
 ```js
+import React, { Suspense } from 'react';
+
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
 const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
 
@@ -170,7 +174,9 @@ function MyComponent() {
 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.
 
 ```js
+import React, { Suspense } from 'react';
 import MyErrorBoundary from './MyErrorBoundary';
+
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
 const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
 
@@ -203,8 +209,8 @@ Here's an example of how to setup route-based code splitting into your app using
 libraries like [React Router](https://reacttraining.com/react-router/) with `React.lazy`.
 
 ```js
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import React, { Suspense, lazy } from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 const Home = lazy(() => import('./routes/Home'));
 const About = lazy(() => import('./routes/About'));