Web development is a constantly evolving world. Optimizing display performance for tables containing large amounts of data is a well-known challenge for developers. At NetDevicesOur team takes on this kind of challenge every day.
In this article, we'll explore a specific table display problem. We'll also take a look at how one of our developers, Dany, used ReactReact-table and React-window. The latter is happy to share his experience. A few days ago, we conducted an interview with him. So we thought his insights would be invaluable. In particular, for anyone facing similar challenges in their own projects.
Now let's get to the heart of the matter and find out how Dany solved this complex technical challenge. !
Improve display performance for theapplication
When developing application , which required optimized display of data in a table, Dany was faced with a real challenge. This application presents data in very large quantities. The information varies in time and on the basis of numerous data recalculated in the front-end. The data evolves in real time and very frequently.
In total, this data is to be displayed in a table of some thirty columns. Inside, there is a lot of duplicate information. There are several hundred rows. The table must therefore display an enormous quantity of data, updated in real time. It also needs to support sorting and filtering functions, while remaining highly reactive. Updates are almost instantaneous.
As a result, the technical challenge is to optimize the display of a data-rich table with React and React-table.
The crucial role of Windowing and React-window in display optimization
The windowing is a key technical concept. It optimizes the display of a table with a large amount of data. This process defines a window in which only the elements inside are loaded into the DOM (Document Object Model). Instead of displaying all the elements on the page, which slows down component loading. Only what's useful is rendered. In other words, what's contained in the window defined by windowing.
When the user scrolls the table, elements that enter the window are loaded into the DOM. Those outside the window are deleted. This is easily achieved using the React-window library. The latter is recommended in the React-table documentation. The library is used to generate the data table.
In addition, Dany shares an interesting article on the aforementioned technique: Optimizing React performance: windowing VS component recycling.
A major obstacle: the slowness of the display
When implementing the table, Dany encountered slowdown problems, particularly when using the sorting features. This became particularly obvious on days when there was a lot of data to update with sockets. The table would then take a long time to update when you wanted to sort it. We had to react and find an appropriate solution. The major challenge was to discover the Windowing technique. Indeed, our developer didn't know about it before implementing the table. An effective developer needs to be flexible and tenaciously curious to find the optimum solution, just like Dany.
How Dany used FixedSizeList for better display performance
React-window provides several components for windowing, so our expert developer decided to use FixedSizeList. Depending on the height and width of the window, the height of an array element and the total number of array elements, chis component manages the display within the window and the removal from it.
It is therefore essential to provide the component with the correct parameters. This enables the library to manage the display efficiently. For this project, the React-table library directly supplied the total number of elements in the table and the total width of the table. All that remained was to supply the desired display height and the height of a single element.
It's also important to take into account the different screen sizes possible. It is necessary to specify a size that adapts to these screen sizes. In our case, Dany chose to take the size of the parent element using the method getBoundingClientRect javascript (see attached sample code).
Strategic use of the overscanCount property
A property provided by React-window, overscanCount, allows you to choose the number of elements you wish to load in addition to those already in the window. Dany found that loading the exact number of elements calculated by the library was not optimal in terms of display performance. When you scroll quickly across the board, the library doesn't have time to render the elements as quickly as you scroll, leaving blank spaces while the elements are loaded onto the screen by the library. In our case, loading 10 more elements optimizes the display.
Exploring alternatives: recycling elements
As mentioned in Dany's article above, there is also the technique of recycling elements. However, he didn't use this technique. Since the libraries found didn't make much difference in terms of table display performance.
Implement React-window with React-table, sample code
Here's a simplified example of how to implement React-window with React-table. This is a basic example of how these two libraries can be used together to optimize the display of a large data table.
Dany's teachings, next step with NetDevices
In conclusion, optimizing the display of a data-intensive table is a frequent challenge in web development. Thanks to the combination of React, React-table and React-window, it is possible to create a fluid and responsive user experience, even with massive amounts of data.
However, every application is unique and requires its own solution. The approach that Dany, one of our experienced developers, shared with us worked well. But it can't be applied to every project. The best advice, as Dany passed on to us. Always research and test different approaches to find the one that best suits your needs.
At NetDevices, we strive to offer the best technical solutions to meet the unique challenges of each project. If you have any questions or concerns about optimizing the display of data tables, or if you need help developing a responsive, high-performance application web site, please don't hesitate to contact us at please contact us.
We'll be happy to help you find the best solution for your project, just as Dany was able to do for this project. Don't let technical challenges stand in the way of your application success, call in the experts to ensure an optimal user experience.
