React.js app using up a lot of memory ( almost double the original implementation ) React.js app using up a lot of memory ( almost double the original implementation ) reactjs reactjs

React.js app using up a lot of memory ( almost double the original implementation )


React is using something called Virtual DOM. Basically it constructs alternative DOM tree in memory, in addition to the existing browser DOM tree, but to perform efficient updates it has to keep last displayed Virtual DOM tree in memory, so it can generate fast and efficient updates to the browser DOM tree.

From details of second question, I understand that you have an infinite scroll, where you basically add new components (without removing new ones) when user scrolls down the page. So this should be the source of increased memory usage (since now you have data + virtual dom in memory, compared to the previous solution)

The way it fix it is to render only components which are actually visible to the user, you can try to use react-list, or implement your own component for this.