How to split your React app?
Tags: performance, javascript
Published: 2021-04-05 14:41:18

Hi everybody in this post I'm going to show you, how to split your React app. This post is very easy and quick to follow.

{% youtube lrMnIyXhf1E %}

# Why do you need to split your application?

To answer this question in two phrases, can be:
 - Gain performance in your application
 - Don't load unnecessary content


You could see this example (Before):

In that example, we loaded these icons asynchronously. Sometimes we have very heavy assets.
 
```jsx
import React from 'react';

import DeleteIcon from '@material-ui/icons/Delete';
import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import DeleteTwoToneIcon from '@material-ui/icons/DeleteTwoTone';
import DeleteSharpIcon from '@material-ui/icons/DeleteSharp';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
import DeleteForeverRoundedIcon from '@material-ui/icons/DeleteForeverRounded';
import DeleteForeverTwoToneIcon from '@material-ui/icons/DeleteForeverTwoTone';
import DeleteForeverSharpIcon from '@material-ui/icons/DeleteForeverSharp';
import ThreeDRotationIcon from '@material-ui/icons/ThreeDRotation';
import FourKIcon from '@material-ui/icons/FourK';
import ThreeSixtyIcon from '@material-ui/icons/ThreeSixty';

export const Home = () => {
  return (
    <div>
      <h1>Home</h1>
        <DeleteIcon />
        <DeleteOutlinedIcon />
        <DeleteRoundedIcon />
        <DeleteTwoToneIcon />
        <DeleteSharpIcon />
        <DeleteForeverIcon />
        <DeleteForeverOutlinedIcon />
        <DeleteForeverRoundedIcon />
        <DeleteForeverTwoToneIcon />
        <DeleteForeverSharpIcon />
        <ThreeDRotationIcon />
        <FourKIcon />
        <ThreeSixtyIcon />
    </div>
  )
}
```

As we can see, our page loaded in `19.47 s`. In the example above, our page is blocked until all content is loaded.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwv9o5bwl4d2utmwbu8l.png)


# Using ` React.lazy`
```jsx
import React, { Suspense } from 'react';

const DeleteIcon = React.lazy(() => import('@material-ui/icons/Delete'));
const DeleteOutlinedIcon = React.lazy(() => import('@material-ui/icons/DeleteOutlined'));
const DeleteRoundedIcon = React.lazy(() => import('@material-ui/icons/DeleteRounded'));
const DeleteTwoToneIcon = React.lazy(() => import('@material-ui/icons/DeleteTwoTone'));
const DeleteSharpIcon = React.lazy(() => import('@material-ui/icons/DeleteSharp'));
const DeleteForeverIcon = React.lazy(() => import('@material-ui/icons/DeleteForever'));
const DeleteForeverOutlinedIcon = React.lazy(() => import('@material-ui/icons/DeleteForeverOutlined'));
const DeleteForeverRoundedIcon = React.lazy(() => import('@material-ui/icons/DeleteForeverRounded'));
const DeleteForeverTwoToneIcon = React.lazy(() => import('@material-ui/icons/DeleteForeverTwoTone'));
const DeleteForeverSharpIcon = React.lazy(() => import('@material-ui/icons/DeleteForeverSharp'));
const ThreeDRotationIcon = React.lazy(() => import('@material-ui/icons/ThreeDRotation'));
const FourKIcon = React.lazy(() => import('@material-ui/icons/FourK'));
const ThreeSixtyIcon = React.lazy(() => import('@material-ui/icons/ThreeSixty'));


export const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <DeleteIcon />
        <DeleteOutlinedIcon />
        <DeleteRoundedIcon />
        <DeleteTwoToneIcon />
        <DeleteSharpIcon />
        <DeleteForeverIcon />
        <DeleteForeverOutlinedIcon />
        <DeleteForeverRoundedIcon />
        <DeleteForeverTwoToneIcon />
        <DeleteForeverSharpIcon />
        <ThreeDRotationIcon />
        <FourKIcon />
        <ThreeSixtyIcon />
        </Suspense>
    </div>
  )
}
```
Now we can see the `Home` text before all the content is loaded (`22.66s`). 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/org6hsdk89vu4tcaukd2.png)

Our page takes a little longer to load but that's ok.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3j8gfui2x0sjrid8ceu.png)

We can imagine that we have a list of users and two buttons. One button opens modal to add a new user and the other button is another modal to send feedback. So we can use `React.lazy` to load these modals. We can say that the main functionality is our user list. We don't need to lock the whole page for two modals that maybe the user does not use.  

# Split our routes

We can split routes, look at this example.

```jsx
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Skeleton from '@material-ui/lab/Skeleton';

const Home = lazy(() =>
 import(/* webpackChunkName: 'Home' */'./components/home').then(m => ({ default: m.Home }))
);

function App() {
  return (
    <div className="App">
      <Router>
        <Suspense fallback={<Skeleton variant="rect" width={210} height={118} />}>
          <Switch>
            <Route exact path="/" component={Home}/>
          </Switch>
        </Suspense>
      </Router>
    </div>
  );
}

export default App;

```
I hope this post is helpful to you. If you have corrections please write me a comment. Thank you very much =)