Results 1 to 6 of 6

Thread: React components rendered by the Reactor Template are not cleaned up

    Success! Looks like we've fixed this one. According to our records the fix was applied for REAC-145 in 1.1.0.
  1. #1
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default React components rendered by the Reactor Template are not cleaned up

    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

  2. #2
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default

    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.

  3. #3
    Sencha User
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  4. #4
    Sencha User
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482

    Default

    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

  5. #5
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default

    Mark, this works great, thanks!

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

    Code:
    // 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!


  6. #6
    Sencha User
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482

    Default

    The latest prerelease of @extjs/reactor fixes the issues reported here. You can install it with

    Code:
    npm i @extjs/[email protected]

Similar Threads

  1. React components as cell renderer
    By geniny in forum Q&A
    Replies: 4
    Last Post: 18 May 2017, 1:28 PM
  2. RowExpander - template is not rendered
    By Vovan81 in forum Ext: Q&A
    Replies: 1
    Last Post: 28 Jan 2014, 2:18 AM
  3. Replies: 3
    Last Post: 29 Aug 2012, 9:52 PM
  4. Can a template contain Ext components?
    By dbassett74 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 14 Jul 2009, 1:46 PM
  5. IE6 - components not rendered on a window
    By prameela in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 7 Mar 2009, 4:41 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •