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.
This article assumes that you have practical knowledge about React JS and have a good understanding of javascript. And working with npm libraries.
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:-
Now let’s start the integration process.
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; }
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> ) } }
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.
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.
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.
How to Effectively Hire and Manage a Remote Team of Developers.
Download NowWe had very close go live timeline and MindBowser team got us live a month before.
CEO, BuyNow WorldWide
If you want a team of great developers, I recommend them for the next project.
Founder, Teach Reach
Mindbowser built both iOS and Android apps for Mindworks, that have stood the test of time. 5 years later they still function quite beautifully. Their team always met their objectives and I'm very happy with the end result. Thank you!
Founder, Mindworks
Our CISO was extremely impressed by Mindbowser’s work. It is pretty rare to see this kind of clean security report so early in the company’s journey. Huge Thank you for the disciplined approach here.
Founder, TrestleIQ
Mindbowser has delivered a much better quality product than our previous tech vendors. Our product is stable and passed Well Architected Framework Review from AWS.
CEO, PurpleAnt
The flexibility and capacity of the Mindbower staff has been impressive.
CEO, ProofPilot
I am happy to share that we got USD 10k in cloud credits courtesy of our friends at Mindbowser. Thank you Pravin and Ayush, this means a lot to us.
CTO, Shortlist
Mindbowser is one of the reasons that our app is successful. These guys have been a great team.
Founder & CEO, MangoMirror
Kudos for all your hard work and diligence on the Telehealth platform project. You made it possible.
CEO, ThriveHealth
Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.
CEO, SMILINGMIND
They were a very responsive team! Extremely easy to communicate and work with!
Founder & CEO, TotTech
We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.
Co-Founder, TEAM8s
Mindbowser was very helpful with explaining the development process and started quickly on the project.
Executive Director of Product Development, Innovation Lab
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.
Co-Founder, Vesica
Mindbowser is professional, efficient and thorough.
Consultant, XPRIZE
Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.
Founder, S.T.A.R.S of Wellness
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.
Co-Founder, Flat Earth
Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.
Founder, Child Life On Call
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.
Founder, Courtyardly
The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!
CEO, SDOH2Health LLC
Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.
CEO, Stealth Startup
Mindbowser was an excellent partner in developing my fitness app. They were patient, attentive, & understood my business needs. The end product exceeded my expectations. Thrilled to share it globally.
Owner, Phalanx
Mindbowser's expertise in tech, process & mobile development made them our choice for our app. The team was dedicated to the process & delivered high-quality features on time. They also gave valuable industry advice. Highly recommend them for app development...
Co-Founder, Fox&Fork
We cannot express enough how pleased we are with the entire Mindbowser team. From our first call, they focused on our vision and ensured things were handled as per requirement. Communication was so easy and flexible to our schedule. I’m...
Founder, SafeZone Safety Systems