React Lazy, Suspense, and Code Splitting

import Foo from './Foo';    // this is for synchronous, declarative,
// webpack finds it and ready it line by line
import('./Foo').then(Foo =>
var Cast = React.lazy(() => import('./Cast'));// import Cast from './Cast';   // Regular
  1. Use asynchronous imports on those components which will take time to load. eg. images, videos, or some time-consuming response.
  2. The page will load, in the meantime, other components will lazily load.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amir Mustafa

Amir Mustafa

JavaScript Specialist | Consultant | YouTuber 🎬. | AWS ☁️ | Docker 🐳 | Digital Nomad | Human. Connect with me on