{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/react-code-splitting-with-lazy-suspense/","result":{"data":{"markdownRemark":{"id":"50d1d230-39f5-5a37-a507-89d54b49acda","excerpt":"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…","html":"

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.

\n

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

\n

1. React.lazy()

\n

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.

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

2. React.Suspense()

\n

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.

\n
// This component is loaded dynamically or lazy load\nconst BlogComponent = React.lazy(() => import('./BlogComponent'));\n\nfunction AppComponent() {\n  return (\n    // Displays <LoaderSpinner> until BlogComponent loads\n    <React.Suspense fallback={<LoaderSpinner />}>\n      <div>\n        <BlogComponent />\n      </div>\n    </React.Suspense>\n  );\n}
\n","headings":[{"value":"1. React.lazy()","depth":2},{"value":"2. React.Suspense()","depth":2}],"fields":{"slug":"/engineering/react-code-splitting-with-lazy-suspense/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"Load Application faster with code spliting and dynamic loading","title":"Code spliting in React via lazy and suspense","canonical":null,"date":"May 13, 2021","updated_date":null,"tags":["React"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/12ea532cdd9f0017a02bfb74d888bba7/03979/react.png","srcSet":"/static/12ea532cdd9f0017a02bfb74d888bba7/f5f11/react.png 200w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/6d133/react.png 400w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/03979/react.png 800w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/aca38/react.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","bio":"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.","avatar":null}}}},"pageContext":{"id":"50d1d230-39f5-5a37-a507-89d54b49acda","fields__slug":"/engineering/react-code-splitting-with-lazy-suspense/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}