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.

Conclusion

From the above article, we covered how to integrate React-virtualized with the list. How it helps to boost the performance of an application. We also see which thing we shouldn’t do while rendering components in the list. We also cover how we can use lifecycle to boost performance.

Check Related Case Study- We Helped Our Client To Convert The Old Application Into A New Stack

Hire On-Demand Expert React Native Developers for App Development or Extending Your Team.

Prasad

Tech Expert

Prasad is a Full-stack developer with around 3+ years of experience. He is an expert in building Python integrated web applications, Creating REST APIs with well designed, testable, and efficient, and optimized code. He is having experience in web technologies like ReactJS, JavaScript, etc. He loves to solve technical problems, learn new technologies, and helping others.

The founder's survey report on "What Matters For Startup" is released - Get your copy and learn the trends of successful companies :)

Download Free eBook Now!

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

"Mindbowser was very helpful with explaining the development process and started quickly on the project."

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

"The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs."

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

"They're very tech-savvy, yet humble."

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

"Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier"

author
Katie Taylor
Founder, Child Life On Call
coma

“As a founder of a budding start up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity."

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give