Search for a command to run...
Exploring the new tools and techniques on frontend development. Loves to meet up with new people and participate in the community. I do interesting stuff on codepen https://codepen.io/nirazanbasnet
No comments yet. Be the first to comment.
A few months ago, my product manager dropped something in the team channel. "We are adding an AI agent to the platform next quarter. It will handle follow-ups automatically." Just like that. One messa
f you’re diving into React, you’ve likely come across the useRef hook. But what exactly is useRef(), and how can it make your life easier? In this post we’ll cover what useRef is, walk through five
A bug that only happens for some users, that you can never reproduce, that isn't in your code. Welcome to the React + browser-translation crash — what causes it, why it's so sneaky, and the battle-tested one-file fix.
Upgrading a core production database is usually the stuff of dev nightmares. It often involves maintenance windows, scheduled downtime, and the looming fear of a botched migration. But what if you cou
We are moving into products that adapt, predict and react with real context. Designing only interfaces is not enough anymore. We are designing experiences that understand the user. Designers and digital agencies are now challenged to move beyond trad...
Engineering at JoBins
167 posts
Welcome to Engineering at JoBins — where we share the stories, insights, and lessons from building a world-class hiring platform. From system design and scalability to developer tools and team culture, our engineers write about the real challenges we solve every day. Whether you're a curious developer or a fellow builder, we hope our experiences inspire and inform your own engineering journey.
As web applications grow more complex and data-intensive, performance optimization becomes increasingly critical. Recently, I encountered significant performance challenges while building list card components for a large-scale data set in a Next.js application. The application had to handle more than 2,000 data items, and without pagination, the UI became sluggish and unresponsive. This led me to explore data virtualization as a solution, which proved to be a game-changer for optimizing the system.
In a recent project, I was tasked with building a list card component to display over 2,000 data items in a Next.js application. Initially, I opted to render all the data at once, thinking it would provide a seamless user experience. However, this approach quickly exposed its limitations:
Performance Issues: The browser struggled to render such a large number of DOM elements simultaneously. This led to slow page loads, increased memory usage, and a generally sluggish user experience.
User Experience: Scrolling through the list became choppy, and the overall responsiveness of the application suffered. This was especially problematic for users on lower-end devices or with slower internet connections.
Without implementing pagination or any form of data optimization, the application’s performance degraded, making it clear that an alternative solution was necessary.
Data virtualization emerged as the perfect solution to this problem. It allows only a subset of the data to be rendered in the DOM at any given time, typically only the items visible in the viewport. As the user scrolls, the data virtualization library dynamically renders the next set of items, keeping the DOM lightweight and the application fast.
Data virtualization works by rendering only the visible portion of a large data set and a small buffer of off-screen items. As the user scrolls, the components that move out of view are removed from the DOM, and new components are added to represent the next set of visible items. This technique significantly reduces the number of DOM elements at any given time, improving both rendering performance and memory usage.
Here’s a simplified illustration of how data virtualization works:
Initial Render: Only the items visible in the viewport and a small buffer above and below are rendered.
Scroll Event: As the user scrolls, the list dynamically updates, rendering new items that come into view and removing those that move out of view.
Continuous Update: This process continues, ensuring that the DOM always contains a manageable number of elements, regardless of the total size of the data set.
To implement data virtualization in a React application, you can use libraries like react-window or react-virtualized. Below is an example using react-window:
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>
{/* Render your card component here */}
<CardComponent data={data[index]} />
</div>
);
const VirtualizedList = ({ data }) => (
<List
height={600} // Height of the list container
itemCount={data.length} // Total number of items
itemSize={120} // Height of each item
width="100%" // Width of the list container
>
{Row}
</List>
);
export default VirtualizedList;
In this example:
height defines the height of the list container.
itemCount is the total number of items in your data set.
itemSize specifies the height of each item in the list.
The Row component renders each item, and react-window handles the rendering and removal of items as the user scrolls.
For more information visit this link.
In a Vue.js application, you can achieve data virtualization using the vue-virtual-scroller library. Below is an example implementation:
<template>
<div>
<virtual-scroller
:items="items"
:item-height="120"
class="scroller"
>
<template #default="{ item }">
<CardComponent :data="item" />
</template>
</virtual-scroller>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import VirtualScroller from 'vue-virtual-scroller';
import CardComponent from './CardComponent.vue';
export default defineComponent({
components: { VirtualScroller, CardComponent },
data() {
return {
items: [] // Your data array
};
},
mounted() {
// Fetch or initialize your data here
this.items = fetchData();
}
});
</script>
<style>
.scroller {
height: 600px; /* Height of the scroller container */
overflow-y: auto;
}
</style>
In this Vue.js example:
The virtual-scroller component dynamically renders only the visible items.
The items array contains the data set, and item-height defines the height of each item.
The CardComponent is used to render each item in the list.
For more information visit this link.
By implementing data virtualization, I was able to drastically improve the performance of the Next.js application. The list card component became smooth and responsive, even with over 1,000 data items. The memory usage was reduced, and the overall user experience was enhanced. Similarly, in Vue.js applications, data virtualization can provide the same performance benefits, making it an essential tool for handling large data sets efficiently.
Data virtualization is a powerful optimization technique for React and Vue.js applications dealing with large data sets. By rendering only the visible portion of the data, you can significantly improve performance, reduce memory usage, and enhance the user experience. Whether you’re building a complex Next.js application or a feature-rich Vue.js app, data virtualization should be a key part of your performance optimization toolkit.
👏👏 By coming this far I hope you understand how data virtualization works and can implement this awesome packages on your project. So, I suggest you give it a try on your project and enjoy it!
Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.
Till then, Keep on Hacking, Cheers