There are 1,000 comments 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. The main concept behind virtual rendering is rendering only what is visible. Let’s study how it works internally! How does react-virtualized work? In other words, this library presents only the required rows and indicates the presence of other hidden rows virtually via CSS styles. This library typically renders only visible rows in a large list and creates fewer DOM elements to reduce the performance overhead in apps. One way is by using a library like react-virtualized, which renders large lists in a performance-friendly technique called virtual rendering. So how can we display thousands of rows in an efficient way? In less powerful devices or with more complex layouts, this could freeze the UI or even crash the browser, affecting app usability. Look at the following preview and see how directly-rendered large lists affect app performance: You can experiment with this scenario in this GitHub repository. So, if we directly render large lists in web apps, the browser heavily uses the computer memory and increases CPU/GPU usage while rendering (especially with initial rendering phases).Īs a result, the app’s framerate gets reduced, becomes slow, and is no longer not user-friendly. Rendering a new DOM element needs physical memory and consumes CPU and GPU hardware when DOM element positions get changed with user events, such as scrolling. If they use that approach for rendering thousands of rows, the web browser will always create thousands of DOM elements even though a scrollbar typically hides overflowing content. React developers typically use the map function and render lists with multiple rows.
Calculating the height of a row automatically.You’ll also learn about two other helpful components: CellMeasurer, to dynamically measure the width and height of the rows, and ScrollSync, to synchronize scrolling between two or more virtualized components.
#Overflow h how to#
Then, you’ll learn how React Virtualized solves those problems and how to efficiently render the list of the first example using the List and Autosizer components. In this article, I’ll show you how to use react-virtualized to display a large amount of data efficiently.įirst, you’ll see the problems with rendering a huge data set. You have probably done it hundreds of times.īut what if you need to show thousands of rows at the same time?Īnd what if the pagination technique is not an option (or maybe it is but you still have to show a lot of information)? The infinite scrolling technique only limits rendering future elements and renders all previous rows, causing performance issues for very large lists.
#Overflow h upgrade#
Find me at Rendering large lists with React VirtualizedĮditor’s note: This article was last updated on 1 March 2023 to upgrade React and other library versions, re-write examples in functional components, and extend the tutorial with Grid, Collection, and UI/UX improvement examples.Ī common requirement in web applications is displaying lists of data. Like books, movies, and still trying many things.
0 kommentar(er)
