How to use Code Splitting in ReactJS
Tags: react, javascript, webdev, productivity
Published: 2022-08-09 17:02:05

Hey Devs👋

We all know that the ReactJS is very popular library in web application. We create a project small, medium and large size app. As our app grow the bundle of that app grow too. And especially when we use some third party modules. Which will accidentally make it so large that your app takes a long time to load. How fast user can interact with our app will directly proportional to user stay on our app.
So we will learn one of the method to increase the performance of web app that is Code Splitting🔨. 


**What is Code Splitting in ReactJS?**

Code Splitting is a feature which can create bundles that can be dynamically loaded at time. Basically this feature will split bundle into a smaller chunks.

**Why we use Code Splitting?**

This is very interesting question 👍. Sometimes a single react component (`LargeComponent`) get very large(large in having many child components) and we don't need all the children at a time😶.

But these child components are still there. When we create a build for a project the complete chunk will be created for `LargeComponent`.
During the initial load of web page that complete chunk get download for rendering the `LargeComponent`.

This will increase loading⌛ time of web page.
To overcome this loading time we use Code Splitting. So that on initial load we will only get the code that required at that time 🙂.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fduk3up5fokov8feikf3.png)

As you can see in above image there is a component called `LargeComponent` which has three child component but on a initial loading we only need `Child1` and `Child2` but in a bundle there would be a complete chunk for `LargeComponent`, `Child1`, `Child2` and `Child3`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbh5wnsx7hl5ezyknuiv.png)
 


After using Code Splitting the chunk for `Child3` would be create separately from `LargeComponent`, `Child1` and `Child2`.

**How to use Code Spitting?**

`React.lazy`😴 function come in the picture to make the component lazy. The `React.lazy` function lets you render a dynamic import as a regular component

Before:
```
import Child3 from './Child3';
```

After:
```
const Child3 = React.lazy(() => import('./Child3'));
```
This will automatically load the bundle containing the `Child3` when this component is first rendered.

`React.lazy` takes a function that must call a dynamic `import()`. This must return a Promise which resolves to a module with a default export containing a React component.

The lazy component should then be rendered inside a `Suspense` component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

```
import React, { Suspense } from 'react';
import Child1 from './Child1';
import Child2 from './Child2';

const Child3 = React.lazy(() => import('./OtherComponent'));

function ParentComponent() {
  return (
    <div>
      <Child1/>
      <Child2/>
      <Suspense fallback={<div>Loading...</div>}>
        <Child3/>
      </Suspense>
    </div>
  );
}
```

As you can see in above code `Child1` and `Child2` components are import directly. But the `Child3` component import using `React.lazy`. 

The fallback prop accepts any React elements that you want to render while waiting for the `Child3` component to load. 

This is the simplest implementation for code-splitting in ReactJS.

Hope🤞🏻 you understand the concept of Code Splitting🙂.