DEV Community

Cover image for How to implement Lazy Loading in REACT | code splitting
Sedrick Tha Dev
Sedrick Tha Dev

Posted on

How to implement Lazy Loading in REACT | code splitting

Here is a simple App component:

import Bids from './components/Pages/OnlineAuction/Auctions/Bids'
import { GeneralGoods } from './components/Pages/Galleries/GeneralGoods/GeneralGoods'

class App extends Component {
  render() {
    return (
    <div>
      <BrowserRouter>
      <div>
        <Routes>

            <Route path="/galleries-general-goods" element={<GeneralGoods />} />

        </Routes>
      </div>
      </BrowserRouter>
      </div>
    );
  }
}

export default App;
Enter fullscreen mode Exit fullscreen mode

React imports all the components as soon as the Application starts. But there's a problem to this.

React takes some time to load all components and the App is accessible only after all the components have been imported.
So if a user to your site or app does not visit 7 out of 8 of your components, they will still be loaded and this has an impact on the performance of your app.

Luckily, there is a solution made available to us by REACT.

Lazy Loading
We can choose when to load the required components. So components are only imported by REACT App only when the relevant route is visited.

Below are the 5 simple steps to achieve this:
1- Import Lazy & Suspense from REACT.

import {lazy, Suspense} from 'react'
Enter fullscreen mode Exit fullscreen mode

2- Use the import function

const myComponent = () => import('./components/myComponent')
Enter fullscreen mode Exit fullscreen mode

3- Wrap your imports in lazy()

const myComponent = lazy (() => 
import('./components/myComponent'))
Enter fullscreen mode Exit fullscreen mode

4- Wrap the returns inside Suspense()

function App() {
    return (
      <Suspense>
        //ALL YOUR RETURN COMPONENTS HERE
      </Suspense>
)
}
Enter fullscreen mode Exit fullscreen mode

5- Specify fallback for Suspense()

<Suspense fallback={<div><p>I am Loading</p></div>}
    //ALL YOUR RETURN COMPONENTS HERE
</Suspense>
Enter fullscreen mode Exit fullscreen mode

Complete component should be something like this:

import {lazy, Suspense} from 'react'
import {Switch, Route} from 'react-router-dom'
const Bids = lazy(() => import('./components/Bids'))
const GeneralGoods = lazy(() => import('./components/GeneralGoods'))

function App() {
    return (
      <Suspense fallback={<div><p>I am Loading</p></div>} >
<Switch>
       <Route path="/bids" exact>
         <Bids />
       </Route>
       <Route path="/goods" exact>
         <GeneralGoods />
      </Route>
</Switch>

       </Suspense>
   )

}
Enter fullscreen mode Exit fullscreen mode

If you managed to reach this far, thank you very much. I also post similar content on LinkedIn at [https://www.linkedin.com/in/eng-sedrick-nyanyiwa-39110aa6]

Top comments (3)

Collapse
 
link2twenty profile image
Andrew Bone

Hello!

If you'd like, you can add syntax highlighting (colors that make code easier to read) to your code block like the following example.

console.log('Hello world!');
Enter fullscreen mode Exit fullscreen mode

This should make it a bit easier to understand your code. 😎

In order to use this in your code blocks, you must designate the coding language you are using directly after the first three back-ticks. So in the example above, you'd write three back-ticks js (no space between the two), put the code beneath (e.g. console.log('Hello world!');), then three back-ticks beneath that to close the code.

Here's an image that shows how it's written!

Example of how to add syntax highlighting in code blocks

Collapse
 
lokendra-chaulagain profile image
Lokendra Chaulagan

Thanks

Collapse
 
licjavierbarrios profile image
licjavierbarrios

Excelent