PDA

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



geniny
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,
Yuri

geniny
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.

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

Mark.Brocato
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.

https://github.com/sencha/extjs-reactor/pull/223

geniny
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!

Mark.Brocato
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]