How to implement Lazy Loading in REACT | code splitting

#react #javascript #webdev #programming

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;

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'

2- Use the import function

const myComponent = () => import('./components/myComponent')

3- Wrap your imports in lazy()

const myComponent = lazy (() => 
import('./components/myComponent'))

4- Wrap the returns inside Suspense()

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

5- Specify fallback for Suspense()

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

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>
   )

}

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)

Andrew Bone • Aug 18 '22

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!');

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!