Join us on the demo, while our product experts provide a detailed walkthrough of our enterprise platform.

Code spliting in React via lazy and suspense

Load Application faster with code spliting and dynamic loading

Abhimanyu Singh Rathore
Abhimanyu Singh Rathore
May 13, 2021
1 min read

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


LoginRadius Docs

Implement Authentication in Minutes

click here

Most Popular Tags

EngineeringJavaScriptNodeJsReactAuthenticationCSSSecurityOAuthGoSocialLogin

Are your customers safe on your application?

According to Forbes, data breaches exposed 4.1 billion records in the first six months of 2019. If this gets you worried, we’ve got your back!

LoginRadius protects your customers’ identities. We provide world-class security for your customers during login, registration, password setup, and any other data touchpoints, and make sure that their data is safe. We do so through by offering open source SDKs, integrations with over 150 third party applications, pre-designed and customizable login interfaces, and best-in-class data security products such as MFA, RBA, and Advanced Password Policies. The platform is already loved by over 3,000 businesses with a monthly reach of 1.17 billion users worldwide.Secure Your Application Now

Abhimanyu Singh Rathore

Abhimanyu Singh Rathore

A Fun loving, Technocrat, Artist, Photographer, Nature Lover, Bold, Leisure traveller, Sightseer, Developer, A Surprise Package to Explore!

View Profile

Try a Modern Authentication Solution

$0/ month

Free Sign Up
  • 7,000 Monthly Active Users
  • 1 Web or Mobile App
  • Email/Password Login
  • 3 Social Login Providers
  • User Data Storage
  • Transactional Email Template
  • Customizable Login Interfaces