Forem: Rolwin Reevan Monteiro

Code splitting in react with React.lazy() and Suspense

Rolwin Reevan Monteiro — Mon, 25 May 2020 07:54:24 +0000

Code splitting is an awesome feature of webpack that can be used to split your code into smaller bundles and can be loaded when necessary or in parallel. If this feature is used properly it can have a very huge impact on the performance improvement of your application. You can look more about code splitting here in the official webpack documentation.

Code splitting in React

Suppose you are loading a library we use an import statement on the top of your file telling our code that some dependency is needed. The example below shows how an import works.

/**
* Before code splitting
*/
import { Average } from './mathLibrary.js'

console.log(Average([0,1,4,3,2]));

The sad part is all import statements have to be written on the top of your file. This creates a problem that all dependencies will be loaded at the beginning itself increasing the load time.

In React we can handle this a bit differently. We can load that code only when required. This is called as code splitting. The example above can be written with code splitting as follows.

/**
* After code splitting
*/
import('./mathLibrary.js')
    .then(math => console.log( math.Average([0,1,4,3,2] )));

When webpack comes across this code it automatically starts code splitting.

Lazy loading a component in React

Suppose we want to do a code splitting for a component in React we do it with React.lazy API.
The example below shows how to make a component Lazy loaded.


/**
* Lazy load the component
*/
const AuthComponent = React.lazy(() => import('./auth'))

The component will be loaded only when it will be needed from the server.

Using a Lazy Loaded component with React.Suspense

Suppose we are using a lazy-loaded component we need to wrap it with React.Suspense.

React 16.6 added a <Suspense> component that lets you “wait” for some code to load and declaratively specify a loader or some skeleton while we’re waiting. React.Suspense is just like the Error boundaries which we use for our React apps.

/**
* Lazy load the component
*/
const AuthComponent = React.lazy(() => import('./auth'))

function App () {
    <React.Suspense fallback={<div>loading...</div>}>
        <AuthComponent/>
    <React.Suspense>
}

When the <AuthComponent/> is loaded from the server loading... is displayed till it's finished loading the component.

When to use React.lazy & React.Suspense to perform code splitting?

It can be very tricky to decide when to perform code splitting in an application. Some of the most common use cases I can think of is

Code splitting for page Routes.
Opening a popup model

Let us see how to use Code splitting on page routes.

/**
* Lazy load the component
*/
import React, { Component, Suspense } from 'react'
import Loading from './Loading'

import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom'

const LazyHome = React.lazy(() => import('./Home'))
const LazyPage1 = React.lazy(() => import('./Page1'))
const LazyPage2 = React.lazy(() => import('./Page2'))

const App = (){
      return (
        <Router>
            <div>
            <Suspense fallback={<Loading />}>
                <Route exact path='/' component={LazyHome} />
                <Route path='/page1' component={LazyPage1} />
                <Route path='/pag2' component={LazyPage2} />
            </Suspense>
            </div>
        </Router>
    )
}

export default App;

The above code will split the bundle into smaller blocks and load the piece of code when necessary. For example LazyPage1 will be loaded only when you navigate to /page1. This will effectively reduce the load time of the application.

I hope you liked this article. You can read more such articles on my page https://rolwinreevan.com/blog

Center align things in css

Rolwin Reevan Monteiro — Fri, 08 May 2020 09:25:39 +0000

Many a time I noticed that people find it very difficult to align content to the center either vertically or horizontally using CSS 😐.
So I decided to write a few ways of aligning content to the center using CSS 😃.

Center aligning text in CSS.

So let's start with the easy one aligning text to the center of the screen. To do this just use the style text-align:center on the specific tag you want to align the text to the center.

<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <body>

    <h1 style="text-align: center;">🍔 is center aligned</h1>
    <p>🍒 still in left</p>

    </body>
</html>

aligning content to the center

Now let's get into a little complicated stuff. Aligning a div or any content to the center. So the trick is using margin:auto and giving a specific width to the div. This will get the div aligned horizontally center to the parent element.


<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <style>
        body{
            margin: 0;
        }
        .box{
            height:25rem;
            background-color: blueviolet;
            width: 25rem;
            margin: auto;
        }
    </style>
    <body>
            <div class="box"></div>
    </body>
</html>

To align an image to the center for an img tag you need to just add one more CSS property that is display:block.

<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <style>
        body{
            margin: 0;
        }
        .imgCenter{
            display: block;
            background-color: blueviolet;
            margin: auto;
        }
    </style>
    <body>
            <img class="imgCenter" src="https://i.chzbgr.com/full/7588073728/h78549C5D/not-sure-if-i-hate-css-or-i-hate-designers"/>
    </body>
</html>

Suppose you want to align a div both vertically and horizontally to the center of the parent element then you can do that with the below code.

<!DOCTYPE html>
<html>
<head>
<style>
.centerBox {
  margin: 0;
  position: absolute;
  background-color: blue;
  height:15rem;
  width:15rem;
  top: 50%;
  left:50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
  <div class="centerBox"></div>
</body>
</html>

Using flex to align content to the center

A still better way of aligning content to the center is by using the flex properties.

Suppose you want to align a div horizontally to the center of the parent element. Then you need to apply the display: flex; align-items: center; justify-content: center; properties to the parent element.


<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <style>
        body{
            margin: 0;
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }

    </style>
    <body>
          <div class="container">
              <div class="box"></div>
          </div>  
    </body>
</html>

Suppose you want to vertically and horizontally align a div to the center of the parent element then you need to add the following style to html and body tag.

html, body { height: 100%; } and give some height to the parent element.

That's it your content should be vertically and horizontally aligned to the parent element. The below snippet shows how a div can be aligned to the center.

<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <style>
        html, body {
            height: 100%;
        }
        body{
            margin: 0;
        }
        .container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }

    </style>
    <body>
          <div class="container">
              <div class="box"></div>
          </div>  
    </body>
</html>

Congrats we are at the end of this post. I hope you enjoyed the topic.

If you want to read more of my blogs. You can read it on my personal website https://rolwinreevan.com/blog