Unmounting a tree of components

[kruczy]

Hi,
Today I came about an issue that if I remove a tree of components/elements only the top one will get the componentWillUnmount/componentDidUnmount called

I guess this could happen because components get cached and reused later, tho because of this nested components cannot cleanup timers or dispose of unnecessary resources

maybe https://github.com/developit/preact/blob/5b2ba167cb4e9acc7c0d265358ad7bf056eb46e2/src/vdom/component.js#L235
should be deepHook instead of just hook?

Thanks for any help!

[developit]

@kruczy excellent catch, I don't know how I missed this! It'll need something more complicated than deepHook since there could be grandchild components. I'll get a fix out right away.

[developit]

@kruczy Sorry, I must have been tired earlier - you were exactly right, it just needed to be a deepHook().
I just released 3.3.0, which includes this fix (JSFiddle example).

[kruczy]

Hey @developit, been testing this today and it seems deepHook is not enough as it only calls one level down, components that are below that do not get the hook fired. maybe deepHook should be walking the tree all the way down?

[developit]

@kruczy yeah deepHook only handles high-order components. You're seeing grandchild components not unmount?

Component
    div
        Component   - this one?

[kruczy]

From my observation that would work
but if you create a deeper hierarchy it does not

in my case the tree is 6 components deep I unmount the whole thing at once but unmount hook seems to be called only on the first 2 levels

[kruczy]

I modified your example to show the problem http://jsfiddle.net/orgkorjc/10/

Notice that C only logs on the first iteration and then does not log mounts or unmounts

[developit]

Perfect, that is immensely useful. Will get a fix out for this ASAP.

[developit]

@kruczy This was possibly the biggest rabbit hole I've encountered since adding support for High-Order components to Preact, but I think I've got it solved.

The solution actually necessitated a slight change in how Preact mounts and re-mounts Components, but I think it's a better long-term approach: components will now own their rendered content. Unmounting a component now retains the most recently rendered snapshot (this.base) in-tact with the component when reclaimed by the recycler. Previously, unmounting a component would retain the old DOM within the render parent, and diff it against whatever replaced the component (including if that happened to be null, which would be a recursive recycling op - not very efficient!

With the new semantics for component mount/unmount, the second time you mount a component, it simply diffs against the most recent snapshot. I think this will help with use-cases like routers, where the DOM rendered by different child components of a router is expected to change by somewhere near 100%. It will incur a small overhead when swapping two components that render nearly identical DOM structures, but this can be avoided by serving that use-case using Pure Functions, which always diff against the previous render, even if the component/function is a different reference.

Apologies for the long-winded and perhaps slightly unrelated comment - just useful for my own brain and to document this somewhere! Expect a release soon that fixes your issue.

[kruczy]

Thanks for support and explanation, always great to have a responsive maintainer 👍

[developit]

@kruczy This is fixed in 4.0.0 (currently released under a beta tag, npm i preact@beta).

[kruczy]

thanks, this is fixed: http://jsfiddle.net/z43dp0ok/1/

[developit]

Thanks again for that JSFiddle demo - it's so much easier to diagnose issues with minimal examples. 👍