loginradiusloginradius Blog

Code spliting in React via lazy and suspense

Load Application faster with code spliting and dynamic loading

Everyone wants their application so fast, but how to achieve that, in that case, code splitting comes into the picture, where we split code and set the priority loading of the code snippet.

But how do we set the priority or load them whenever required?

1. React.lazy()

Using this we can set code priority to the lower or it will load only whenever required. So how to do that? it's easy, let's understand through an example.

 //generally approach to import Component
 import Blog from './BlogComponent';
// This component is loaded dynamically or lazy load
const BlogComponent = React.lazy(() => import('./BlogComponent'));

2. React.Suspense()

Once the component is set for a lazy load then we need to set some kind of fallback option as well, till that code is rendered. This fallback option either could be a loader icon, screen, image, etc.

// This component is loaded dynamically or lazy load
const BlogComponent = React.lazy(() => import('./BlogComponent'));

function AppComponent() {
  return (
    // Displays <LoaderSpinner> until BlogComponent loads
    <React.Suspense fallback={<LoaderSpinner />}>
      <div>
        <BlogComponent />
      </div>
    </React.Suspense>
  );
}
Abhimanyu Singh Rathore

Written by Abhimanyu Singh Rathore

He is a fun-loving technocrat, artist, photographer, nature lover, leisure traveler, and developer. He actively develops full-stack apps and programs in Go and various JavaScript frameworks and libraries, especially React.

LoginRadius CIAM Platform

Our Product Experts will show you the power of the LoginRadius CIAM platform, discuss use-cases, and prove out ROI for your business.

Book A Demo Today