How to Implement Code Splitting in React ? Last Updated : 22 Mar, 2024 Comments Improve Suggest changes Like Article Like Report In this article, we will learn about Implementing React code splitting via React.lazy() and Suspense improves app performance by loading code asynchronously and on-demand. What is Code Splitting?Code splitting is a technique used to split a large JavaScript bundle into smaller chunks, which are loaded asynchronously. By only loading the code that is needed at the time, code splitting reduces the initial load time of the application, leading to faster page rendering and improved user experience. Approach to implement Code Splitting:React.lazy(): In the `App.js` file, we use `React.lazy()` to lazily load the `LazyComponent`. The `import()` function is passed as an argument to `React.lazy()`, which dynamically imports the component. It returns a `Promise` for the module containing the component.Suspense: We wrap the `<LazyComponent />` with the `<Suspense>` component. Suspense allows us to specify a loading indicator (fallback) while the lazily loaded component is being fetched. In this example, we display a simple "Loading..." message as the fallback.Asynchronous Loading: When the `App` component mounts, React starts fetching the code for `LazyComponent` asynchronously. While the component is being loaded, the `Suspense` component displays the loading indicator.Rendering LazyComponent: Once the code for `LazyComponent` is fetched and loaded, React renders the `LazyComponent` in place of the `<Suspense>` component.Example of Code Splitting in ReactExample: Suppose we have a React application with a main component `App` and a dynamically loaded component `LazyComponent`. JavaScript // App.js import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./LazyComponent')); const App = () => ( <div> <h1>React Code Splitting Example</h1> <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> </div> ); export default App; JavaScript // LazyComponent.js import React from 'react'; const LazyComponent = () => ( <div> <h2>Lazy Loaded Component</h2> <p> This component was loaded asynchronously using code splitting. </p> </div> ); export default LazyComponent; Steps to Run the App: npm startOutput: OutputConclusion:Utilizing React.lazy() and Suspense for code splitting is an effective method to optimize React app performance, asynchronously loading components to reduce initial load time and enhance user experience. However, exercise caution in code splitting, balancing bundle size and network requests for optimal performance. Comment More infoAdvertise with us Next Article How to Implement Code Splitting in React ? R raipuratxlu Follow Improve Article Tags : Web Technologies ReactJS React-Questions Similar Reads How to implement Conditional Rendering in React? This article explores JavaScript's conditional rendering in React JS, including various methods, syntax, and applications, leveraging React's virtual DOM, reusable components, props, and rapid rendering capabilities in single-page UI applications.We will use the following approaches to implement con 4 min read Code Splitting in React Code-Splitting is a feature supported by bundlers like Webpack, Rollup, and Browserify which can create multiple bundles that can be dynamically loaded at runtime.As websites grow larger and go deeper into components, it becomes heavier. This is especially the case when libraries from third parties 4 min read How To Implement Multiple Filters In React ? Applying Filters in React applications is important for enhancing user experience by allowing users to customize the displayed content based on their preferences. In this article, we will explore two approaches to implementing Multiple Filters in React. Table of Content Using State HooksUsing Contex 6 min read How to modularize code in ReactJS ? Modularize code in React JS refers to dividing it into segments or modules, where each file is responsible for a feature or specific functionality. React code can easily be modularized by using the component structure. The approach is to define each component into different files. With each componen 3 min read How to add code input in React JS? In this article, we are going to learn how we can add Code Input in React JS. React is a front-end JavaScript library for constructing user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Approach to add code input: To incorporate our 2 min read Create a Bill Splitter App using React-Native We are going to implement the Bill Splitter App using React Native. Bill Splitter App is a mobile application that helps us divide expenses and bills among a group of people. For example, when we are dining at a restaurant with friends, going on a trip, or sharing household expenses with roommates.P 4 min read How To Use Single Responsibility Principle in ReactJS? If you're a developer then surely you might have listened to SOLID Principles word several times in your programming career. In Software development, the SOLID principle works as a guideline for developers. It doesn't matter which language you're using in your project, to make your code clean and ma 6 min read How to combine multiple reducers in ReactJS ? To combine multiple reducers in React JS we have a function called combineReducers in the redux. This basically helps to combine multiple reducers into a single unit and use them. Approach In React, to combine and implement multiple reducers combineReducers methods are used. It manages multiple redu 4 min read How to write ReactJS Code in Codepen.IO ? Now everything is online, some people use VScode to write react.js code and face most of the difficulty. The VScode requires setting for writing React.js code and Many beginners faced difficulty to use VScode so, for them, it is good and easy to use codepen. The codepen provide you with an online pl 2 min read How to make Reusable React Components ? ReactJS is a JavaScript library used to build single-page applications (SPAs). React makes it easy to create an interactive user interface by using a component-based approach. In this article, we will learn about Reusable React Components with examples. Table of Content What are Reusable React Compo 4 min read Like