I'm working on a project that incorporates React Component into a NON-react environment.
The project uses Backbone and we're slowly migrating some parts of the website to React.
My question:
Will removing a DOM node (by backbone/jquery) release the memory associated with the React component?
The docs clearly state that you must manage your own mounting/un-mounting, however I'm wondering if simply removing the DOM will clean up the memory for me, or do I need to worry about memory leaks in a long-lived page?
an example usecase is navigating away(using our backbone router) and re-rendering the page, this removes all previous nodes and builds new html - so what happens to all the mounted react components?
Edit:
To be clear, I'm not modifying a rendered component with jQuery.
class App extends React.Component{
render(){
return (<div>Amazing</div>);
}
}
//extreme use case, render a component, remove the DOM node, create a new DOM node
setInterval(function(){
ReactDOM.render(React.createElement(App),document.getElementById('app'));
$('#app').remove();
$('body').append($('<div id="app">'));
},250)
Edit : After investigating the issue, you must detect removed nodes using MutationObserver and unmount them, if you don't the nodes will continue to be rendered in memory. I wrote a full description here :
https://medium.com/@patrick.tolosa/backbone-router-with-react-components-13791727a351