Unmounting a tree of components about preact HOT 12 CLOSED

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

from preact.

@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).

from preact.

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?

from preact.

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

Component
    div
        Component   - this one?

from preact.

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

from preact.

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

from preact.

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

from preact.

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

from preact.

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

from preact.

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

from preact.

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

from preact.

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

from preact.