Optimise Frontend Rendering For Large Data And Boost Speed With ReactJS

Most of the application has a large data to render in the list or table format. So while doing this so many developers make some common mistakes, like we don’t care much about them while writing a code but that thing really affects application performance. So in this article, we are going to see some of their mistakes and how we can boost our application performance by some simple changes.

Prerequisites

This article assumes that you have practical knowledge about React JS and have a good understanding of javascript. And working with npm libraries.

Preface

This article is going to be covering how to optimize large data rendering in web applications with react js. Which thing we shouldn’t do while working with large data.

We will follow the steps below in order:-

1. Some common mistakes we made in components.
2. Proper use of the React component lifecycle.
3. Traversing with react-virtualized.
4. Example of render 1000 and more rows on a single page without pagination.

Now let’s start the integration process.

Some common mistake we made in components

While making components we make some common mistakes in that like while writing a function, using the function.

1. Don’t use an inline function while rendering a list.

Let’s understand how functions work in the scope. When we write any function definition while compiling a function creates an entry in the memory. It creates an entry for every function definition we write so like if we have 10 function definitions in a component so it creates 10 function entries in the memory doesn’t matter if function logic is the same or different. Can see the below example.

2. Don’t use inline CSS style for components too much. 

Don’t use function and style as mention below.

import React, { Component } from 'react'

export class ReactComp extends Component {

    render() {

        const arr = [1,2,3,4,5,6,......] // array of 1000 element

        return (

            <div>

                {arr.map((ele)=>{

                    return (

                        <div onClick={()=>{console.log(ele)}}>

                            {ele}

                        </div>

                    )

                })}             

            </div>

        )

    }

}

Refer to the below code for better performance

import React, { Component } from 'react';

import './style.css';


export class ReactComp extends Component {

    clickhandler = (ele) => {

        console.log(ele)

    }


    render() {

        const arr = [1,2,3,4,5,6,......] // array of 1000 element

        return (

            <div>

                {arr.map((ele)=>{

                    return (

                        <div className="rowstyle" onClick={this.clickhandler}>

                            {ele}

                        </div>

                    )

                })}                

            </div>

        )

    }

}


//create style.css file and add rowstyle class there

.rowstyle{

    margin: 10px;

    height: 50px;

    width: 100px;

}

Proper use of component lifecycle

When we use React for the frontend we have an advantage if we use the component lifecycle properly. When we perform any action in a component like update props or state then it will re-render a component. So basically when we render the same component in like can take the above example in that we render RowComp component in the list. So if we change a props or state in the 5 components it re-renders the list then it takes time to render the list. So we can stop rendering components by using shouldComponentUpdate lifecycle function.

import React, { Component } from 'react'


class RowComp extends Component {

    shouldComponentUpdate(nextProps, nextState){

        // add you logic here when you want ot render the component.

        return false

    }


    render(){

        return(

            <div className="rowstyle" clickhandler={this.props.clickhandler}>

                {this.props.ele}

            </div>

        )

    }

}



export class ReactComp extends Component {

    clickhandler = (ele) => {

        console.log(ele)

    }


    render() {

        const arr = [1,2,3,4,5,6,......] // array of 1000 element

        return (

            <div>

                {arr.map((ele)=>{

                    return (

                        <RowComp className="rowstyle"                  clickhandler={this.clickhandler} ele={ele} />

                    )

                })}                

            </div>

        )

    }

}

Traversing with React-Virtualized

Starting with the development process.

     1. Installation

npm i react-virtualized

We’ve installed a third-party library React-virtualized in our project. Now we are good to implement.

     2. What is React-virtualized and how it works

It is an open-source library that provides you many components in order to window some of your application List, Grid, etc. As a developer, you do not want to reinvent the wheel. React-virtualized is a stable and maintained library. Its community is large and as it is open-source, many modules and extensions are already available in order to window a maximum of elements. Furthermore, it offers lots of functionalities and customization that you would not even think about.

We can check the official documentation. The main concept behind virtual rendering is rendering only what is visible. There are one thousand data in the app, but it only shows around ten at any moment (the ones that fit on the screen), until you scroll to show more. So it makes sense to load only the elements that are visible and unload them when they are not by replacing them with new ones. Let’s take an example of react-virtualized implementation.

Render 1000 row with React-virtualized

import React, { Component } from 'react';

import { List } from "react-virtualized";

class RunRow extends Component{

    shouldComponentUpdate(nextProps, nextState) {

        // add you logic here when you want ot render the component.

        return false

    }

    render(){

        const {data} = this.props;

        return(

            <div className="card">

                <h3>{data.id}</h3>

                <h4>{data.value}</h4>

            </div>

        )

    }

}

export class ListComp extends Component {

    constructor(props) {

        super(props);

        this.state = {

            listData: []

        };

    };

    componentDidMount(){

        // this will generate any array with 1000 element

        let data = []

        let i = 1000;

        while (i >= 0){

            let obj = { id: i, value: `virtualized + ${i}` }

            data.push(obj);

            i = i - 1;

        }

        this.setState({listData: data})

    }

    render() {

        const { listData } = this.state;

        // this will create an empty structure of 1000 element virtualy.

        const data = new Array(listData.length).fill().map((value, id) => (({

            id: id,

            value: value

        })))

        const renderRow = ({ index, key }) => (

            <RunRow key={key} data={listData[index]} />

        )

        return (

            <div>

                <List

                    width={1200} height={1000}

                    rowRenderer={renderRow}

                    rowCount={data.length}

                    rowHeight={10}

                />

            </div>

        )

    }

}

export default ListComp;

In the above, we render 1000 rows in a very simple way and this will reduce the rendering time by almost 50%. We have used the list component of virtualized here there are so many different ways or features of virtualized like Grid, List, Table, etc. can check more examples here.

Points to remember:

• Before using react-virtualized read documentation first, it contains so many more useful features.
• When you’re working with a large list don’t use the inline function and style class.