I recently ported a heavy page to React. I've kept the html almost identical. The main difference being that, earlier, the server rendered html was directly given to the browser and now, the react rewrite pulls json via a server side API and uses React to manage the DOM.

I've seen heap snapshots for the earlier implementation going up to 55 MBs. For the same data, the heap snapshot for the React.js implementation es to around 100+ MBs(almost double)

I understand that the json data held in memory will contribute to some increase in the memory consumed. But, when I examined the heap snapshot, I see that around 60% of the retained size is due to some objects whose retaining path contain deleteAllListeners > .... > unmountComponentAtNode . I am trying to understand what that means in terms of reducing the memory used.

Also, could the "data-reactid" attributes added by React to the DOM contribute to a non-negligible increase in memory consumption ?

This question has some more details that might help.

I recently ported a heavy page to React. I've kept the html almost identical. The main difference being that, earlier, the server rendered html was directly given to the browser and now, the react rewrite pulls json via a server side API and uses React to manage the DOM.

I've seen heap snapshots for the earlier implementation going up to 55 MBs. For the same data, the heap snapshot for the React.js implementation es to around 100+ MBs(almost double)

I understand that the json data held in memory will contribute to some increase in the memory consumed. But, when I examined the heap snapshot, I see that around 60% of the retained size is due to some objects whose retaining path contain deleteAllListeners > .... > unmountComponentAtNode . I am trying to understand what that means in terms of reducing the memory used.

Also, could the "data-reactid" attributes added by React to the DOM contribute to a non-negligible increase in memory consumption ?

This question has some more details that might help.

• javascript
• memory
• google-chrome-devtools
• reactjs

• It's not clear how to try to answer your question without more details. data-reactid is non-negligible, but I wouldn't expect it to contribute a significant amount in a typical page. You can see here how the deleteAllListeners is used. Do you have a lot of event listeners maybe? – WiredPrairie Commented Feb 11, 2015 at 21:56
• Could stackoverflow./questions/28435915/getinitialstate-cloneprops contribute to the increased memory usage as the state is cloned from props(which is then never used again ) ? – letronje Commented Feb 12, 2015 at 12:12
• How much data is being cloned? If you do the multiplication to account for the copies, what's the result? – WiredPrairie Commented Feb 12, 2015 at 12:55

1 Answer 1

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 ponents (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, pared to the previous solution)

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