React Virtualization
Rendering large lists in React can lead to performance issues due to large number of DOM elements being created and managed. React Virtualization is a technique used to optimize the rendering of large lists by only rendering the items that are currently visible on the screen. This significantly reduces the memory footprint and improves the performance of your application.
It is not a part of core React, So you have to install it separately by using the following command.
npm install react-virtualized
Example: Below is the code example:
// index.js
import React,
{
useState,
useEffect
} from 'react';
import { List as VirtualList } from 'react-virtualized';
const LARGE_LIST_SIZE = 1000; // Number of items in the list
function VirtualListComp() {
const [items, setItems] = useState([]);
// Simulate data generation (replace with your actual data fetching logic)
useEffect(() => {
const newItems = [];
for (let i = 1; i <= LARGE_LIST_SIZE; i++) {
newItems.push({ id: i, content: `Item ${i}` });
}
setItems(newItems);
}, []);
const rowRenderer = ({ index, style }) => {
const item = items[index];
return (
<div key={item.id} style={style}>
{item.content}
</div>
);
};
return (
<div className="App">
<h1>Large List Example</h1>
<VirtualList
width={400}
height={400}
rowCount={items.length}
rowHeight={40} // Height of each item
rowRenderer={rowRenderer}
/>
</div>
);
}
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(
<div id='main_container'>
<div>
<img src=
'https://media.w3wiki.org/gfg-gg-logo.svg' alt='gfg_logo' />
</div>
<VirtualListComp />
</div>
);
Output:
React Virtualization Output
Mastering Performance Optimization Techniques with React Hooks
In this article, we will explore advanced performance optimization techniques using React Hooks. We’ll delve into memoization, callback optimization, preventing unnecessary renders, state updates, and more. By mastering these techniques, developers can significantly enhance the performance of their React applications.