How to split your React app?

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.

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.

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.

Using React.lazy

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).

Our page takes a little longer to load but that's ok.

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.

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 =)