While designing a table pls make sure that all your key fields are in order, key fields of the table should precede the other fields. Next thing is that you`ve already created the table and now want to make some adjustments. You do the necessary changes and adjust the database using database utility ( By SE11 MEnu Options or TX. SE14).
Shashi is the driving force behind the group and its vision. Shashi brings to the table strong leadership skills, vigor and a passion for excellence. He believes in nurturing a culture that is entrepreneurial, result oriented, customer focused and based on teamwork.
Commander Navneet Bali has served The Indian Navy for 25 glorious years before entering the healthcare world. A successful stint of growth and accomplishments at Narayana Health and IOSPL has brought great accolades to Cdr. Bali.
Navneet Travels is popular due to its adequate, safe and on-time bus services. Several types of buses run by Navneet Travels help in connecting different routes. Navneet Travels proficiently strives in maintaining its quality and delivering an affordable bus travel experience in the long run.
Navneet Travels has a good frequency of buses that run all throughout the day promoting safety and comfort of passengers. Navneet Travels staff are known for assisting passengers consistently. Travellers prefer Navneet Travels due to its convenient and on time bus services across various city routes.
redDeals are discounts offered by top bus operators exclusively on redBus. The redDeal discount amount which ranges from a minimum of 5% to a maximum of 25% is in addition to any other discount applicable at the time of booking your online bus ticket. So with redDeals you can be assured of not just safe & comfortable travel but also of the cheapest travel option at any time. Different types of redDeals offered by operators include Return trip offer, Early bird offer, Last minute offer, Trial offer, Festive/Holiday offer and more
Booking Navneet Travels online bus tickets from redBus is fast and simple. You can book Navneet Travels ticket by choosing online secured payment options at any time. Every traveller is eligible to ongoing offers and cash backs.
React is "generally" a performant framework.. notice the "" on generally, Yeah that is because at times in react land you do feel very limited because of all the re-rendering which leads to performance issues when you are trying to create a large/complicated component where there is a lot of moving parts and data being manipulated left and right and managing to create a performant ui in all that does becomes a challenge sometimes if you don't have the right tools and knowledge about it you can quickly shoot yourself on the foot in React. But for the most part, it is pretty quick and reliable hence the popularity.
One of the issues I faced a while back when I was working in my company was that I was supposed to render a table of a very large number of columns and rows. For example, let's assume we are working with a 2000 X 200 (rows x cols) size table.
Well for those who are new to reading Chrome dev tools mem graphs, Let me tell you The graph above shows the non-stoping memory growth in the heap size (BLUE LINE). And the GREEN LINE Shows the growth of the number of nodes in the DOM. Both of which point that the app is well over the limit of the safe line which was somewhere around 1500 nodes and 32 max depth.
Well everything and anything in your system will require some amount of memory to run it. In this case where we are taking about the HTML DOM nodes, The average size of a node is dependent on the average number of bytes used in each to hold the content, such as UTF-8 text, attribute names and values, or cached information.
Imagine a smartphone that allocates 1 GB of its memory for the Document Object Model (DOM), as it typically uses 3 GB of its 4 GB total for standard operations. To estimate, one could consider the average memory usage per node based on this allocation.
But there is a technique of partially rendering things in the dom and only rendering those nodes which are visible to the end user. So what we try to do is let's say a user can see only 10 rows at a time and 10 columns at a time then we only render that much, Which is pretty easy and fast for the system to do.
If the user moves up or sideways we render more rows and columns in runtime while the user is scrolling and also keep destroying old nodes which are no longer on the user's screen, That way we are able to maintain a safe amount of nodes for the browser to display and also not overshoot the memory.
For the people who are wondering yes! While virtualization may require additional compute resources compared to rendering all items at once, the benefits it provides in terms of performance, scalability, memory efficiency, and user experience often make it the preferred choice, especially for applications dealing with large or dynamic datasets.
In our case, we had a complex requirement where I had to freeze certain columns and rows while scrolling also the above example shows a list but when you render a bigger table then you should use VariableSizeGrid which treats your rows and cols as individual cells like a matrix and renders only those cells which are visible to the user.
Well, that was it really, some minor changes were made like using useMemo and useCallback to optimise a few more things but most of the performance was gained by using the simple concept.
Btw did you know mobile development also uses the same concept to display large feeds in your social media apps, This is a really cool technique and I had a lot of fun integrating it with our project. Hopefully, someone else who is also struggling with the same issue will find this article useful or even if you are not it's good to have a new weapon in your arsenal, You won't know when you will need it :)
React 19 Some version after React 19 should prevent the need for useMemo() or useCallback(), so developers don't need to think about those anymore. Besides, the concept of memoization has been around for ages, it requires some thinking but it's not THAT complicated.
There is no DOMless framework on a web browser, it's how the browser works. This problem isn't to do with virtual DOM, it's a problem that needs to be solved with virtualization in all cases due to the number of individual DOM nodes created for a large table.
Just use Svelte, Solid, Qwik, Vue and stop it with React....why use React with its runtime shipped to browser ? On top of it it's just a lib, no state management, which is nuts , check out Svelte it's almost got everything, transitions, state management, animations...
I remember facing this issue on a project and the boss said use intersection observer to hide and show the dom of each row and write the code from scratch...
I did it and it worked... But i know i should have used a library ?
Pagination can also help here I think, if not needed then this could be a better option.Also It would be great if this dynamic loading of rows can be achieved from scratch as we don't know whether this 'react-window' library offers best performance and optimization.
question:
i've already try to use virtual list things, for example from 100k item, the component require me to setup how much the height specifically... i think if we use it on fullscreen size table, the height need to be collected from ref, but is there any module to apply the size automatically just like using flex: 1 ?