Unloading Polymer pages

Question

I've been POCing Polymer in combination with Redux and the Polymer (2.0) starter kit, which amongst other things introduces the iron-pages component, as well as the lazy loading of the pages contained therein.

However, I've noticed that they're not actually pages as such, but more like an old-fashioned tab bar , where all content is loaded into the DOM but hidden using CSS. The connectedCallback() lifecycle method is called, but the disconnectedCallback() is not because the component is never unloaded.

This feels like a memory and performance leak to me. One use case we will implement is a frequently updating piece of data through websockets; what I want to avoid is it updating in the background. For desktop I guess it would be okayish, but for mobile it'd be terrible for performance.

Second, I'd rather not have to implement manual lifecycle management; smells of NIH.

So, what it boils down to: Is there either component unloading, or reliable lifecycle callbacks in Polymer and/or a paging web component?

edit: I see Unloading Polymer pages has the same question - it's unanswered though.

edit 2: I see there was an issue raised about this on iron-pages too.

Answer 1

As the related question says, you can use a conditional template ( <template is="dom-if"> ) with the restamp attribute. With restamp , the elements are removed when the conditional is false, so your disconnectedCallback is called.

You could use a set of dom-if templates instead of the iron-pages element.

As you noted, the iron-pages element is more like a tab panel, and works well when the underlying views are comparatively light, or you expect people to switch back and forth frequently and don't want to pay the cost of recreating them. However in many cases when the elements take a lot of memory or (as in your case) are doing work as long as they're on the page, a conditional template is the way to go.