Lazy-Loading React Components

Lazy-Loading React Components

Optimize production builds with code splitting, I’ll go over how to implement code splitting using built-in React functions and components with no libraries or extra configuration needed.

Optimize production builds with code splitting

Code splitting is a very useful tool when it comes to reducing the size of your builds. It allows you to parse (or split) your code into different bundles that can be loaded conditionally based on what is currently needed.

Let’s say you have a suite of e-learning applications for different classes and levels of education. You can compile all of the code for each of those apps into one build file that gets served to the browser when you hit the landing page (which contains links to all the apps).

As long as your build file isn’t too large, this method of compilation isn’t a bad idea. However, if you add new features, apps, or packages to your project, that bundle file can get pretty large.

If your build file is too large, it can slow down the load time for your React app. This can have a negative impact on the user experience. Don’t you hate sluggish load times?

Picture this: You have a very small bundle file for the landing page (which only needs to render links to the myriad of e-learning apps) and then other small bundles for each app that get loaded only if you enter a specific application.

Why do you need the bundle file for English II (or for the other applications in the suite) when you’re only trying to use English I? Code splitting can remedy the situation by separating out relevant code based on your entry point, thus taking code out of the main bundle and reducing its size.

In this article, I’ll go over how to implement code splitting using built-in React functions and components with no libraries or extra configuration needed.

First, here are all of the routes for our application:

import React from 'react'
import Home from './Home'
import EnglishOne from './EnglishOne'
import EnglishTwo from './EnglishTwo'
import MathOne from './MathOne'
import MathTwo from './MathTwo'
const App = () => {
  return (<div> 
    ... 

    <Route 
      exact path="/" 
      component={<Home/>}
    />
    <Route 
      exact path="/english-1" 
      component={<EnglishOne/>}
    />
    <Route 
      exact path="/english-2" 
      component={<EnglishTwo/>}
    />
    <Route 
      exact path="/math-1" 
      component={<MathOne/>}
    />
    <Route 
      exact path="/math-2" 
      component={<MathTwo/>}
    />

  </div>)
}
export default App;

With the addition of a built-in React function and component, we can split up the bundle for the code above into separate bundles for each of them in just two steps. Below is the function we will be using, which is called React.lazy .

lazy

The React.lazy function lets you render a dynamic import as a regular component. Below is what a typical import might look like:

import Home from './Home';

And here is what your import would look like if you used React.lazy:

const Home = React.lazy(() => import('./Home'));

Our second step involves the Suspense component.

Suspense

By wrapping the lazy-loaded components in Suspense, we can show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load. See below:

<Suspense fallback={<div>LOADING</div>}>
  {ROUTES}
</Suspense>

Let’s look at our updated App.js component, including our use of lazy and Suspense:

import React, {lazy, Suspense} from 'react'
const Home = lazy(() => import('./Home'))
const EnglishOne = lazy(() => import('./EnglishOne'))
const EnglishTwo = lazy(() => import('./EnglishTwo'))
const MathOne = lazy(() => import('./MathOne'))
const MathTwo = lazy(() => import('./MathTwo'))
const App = () => {
return (<div>
  ...
  <Suspense fallback={<div>LOADING</div>}>

    <Route 
      exact path="/" 
      component={<Home/>}
    />
    <Route 
      exact path="/english-1" 
      component={<EnglishOne/>}
    />
    <Route 
      exact path="/english-2" 
      component={<EnglishTwo/>}
    />
    <Route 
      exact path="/math-1" 
      component={<MathOne/>}
    />
    <Route 
      exact path="/math-2" 
      component={<MathTwo/>}
    />

  </Suspense>
</div>)
}
export default App;

javascript react web-development programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How To Write Better Code As A Web Developer - React

Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers

How to Become A React JavaScript Developer 🚀

Today Qazi & Sonny will be showing you How To Become a React JavaScript Developer 🚀👨‍💻

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.