Normally, when trying to optimize long lists for low memory usage in libraries such as React, it is advised to use node modules like React-Virtualized. However, this can result in issues when exactly these node modules cause memory problems themselves, thereby increasing your website’s RAM usage dramatically.
This exact issue came up when we tried displaying a list of many large images inside of a Collection element from React-Virtualized.
The Problem
The initial assumption was that the resolution of the images caused the website to use up to 2.5 Gigabytes of RAM. After realizing that changing that resolution didn’t actually make a substantial difference, I needed to start investigating.
My Investigation
One of the first steps taken to prove our assumption was to replace all image tags with paragraph tags to find out if the RAM usage was in fact independent of how big the actual children of the Collection were.
I then attempted to try out a few factors that could have caused RAM usage to go up, these being:
- Whether or not the Collection is used
- The width and height of the paragraphs (just the CSS, not their content)
- How many paragraph tags were used
My Conclusions
After analyzing my results, I concluded that using the collection for any number of small paragraphs did not have much of an impact on memory usage. Simple paragraphs just don’t use up enough memory for a Collection to have a noticeable impact.
That can not be said for big paragraphs though. Using a test environment with 1500 paragraphs that looked like this:
<p style="height: 9000px; width: 9000px;">test</p>
I was able to get the following results:
Memory Usage without Collection: 200MB
Memory Usage with Collection: 1200MB
I then took a closer look at the memory tab inside chrome’s developer tools and found out that there were an astonishing 10,000 Sections in active memory.
The Solution
Once I knew that the Collection seemed to have created more Sections than there were actual children, I knew what I had to do.
The Collection element provides a performance tuning property called SectionSize, which controls how many children can fit into one section.
I proceeded by closing my testing environment and tweaked this parameter inside the actual application.
What I found out was that about two sections would already be enough for our app. So after now adding just one line of code, I managed to get the app to only use about 300MB of RAM instead of 2.5GB.
I did decide to add a little edge-case for small numbers of children though, as the tweak seemed not to work as well when only a few children exist:
sectionSize={children.length > 50 ? children.length / 2 : 50}
What we’ve learned
The main takeaway from this endeavor is that it might sometimes be helpful to not just test if your website is functional, but to also check if it performs well, as even seemingly simple websites might at some point start suffering from memory or performance issues.
Links
Example to play around with the issue: https://codesandbox.io/s/zjrsfp?file=/Example.js
React Virtualized: https://www.npmjs.com/package/react-virtualized