Removing a DOM element of a mounted Component

Viewed 2314

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

1 Answers
Related