View Full Version : [FIXED] React components rendered by the Reactor Template are not cleaned up

25 May 2017, 3:54 PM
The Reactor Template class has a method doRender to render a react component.

But currently there is no method that would be called to clean it up after the template is gone.

You need to add ReactDOM.unmountComponentAtNode method call when the template is discarded.
This will ensure that componentWillUnmount method will be called for all mounted React components in the template.

Thank you,

26 May 2017, 10:15 AM
The best way to see the problem is to have a React template for every row expander. Now switch between the Grid and About tab in your boilerplate app several times. Open the DevTools and click on React tab. Every time you switch to the Grid tab you will see new root level ExtContainer components added. But when you switch away from the Grid tab they will not go away. So you potentially have a massive leak: if I have a React component that renders nodes at the <body> for absolute positioning and relies on componentWillUnmount for the cleanup work.

26 May 2017, 12:29 PM
Thanks for the report! I have opened a bug in our bug tracker.

26 May 2017, 1:44 PM
Here's the fix I am proposing to solve both unmount issues. Need to look at it again on Monday with a fresh pair of eyes but it seems right to me at this point.


26 May 2017, 3:41 PM
Mark, this works great, thanks!

Can you also make this change to the Ext.grid.cell.Cell (ext-react-toolkit) formatValue method:

// raw = tpl.apply(data);
raw = tpl.overwrite(this.element, data);

This will make sure that React templates in cells are mounted 'live' not as a static markup.

I tested it and it works great in my environment. Of course, I do not know all the details so you may come up with a better solution!

16 Jun 2017, 11:09 AM
The latest prerelease of @extjs/reactor fixes the issues reported here. You can install it with

npm i @extjs/[email protected]