element not removed when re-rendered to a different one with a component about preact HOT 7 CLOSED

Hmm - interesting case here. The semantics of that third argument to render() are currently "existing rendered version to update in-place", which is why it doesn't remove the mismatched node. This might be something we need to do a poll about. Good find!

from preact.

it actually works fine if the span is not wrapped in a component: http://jsfiddle.net/ext7nm02/1/

from preact.

Ahh, good hunting - I think that means we can call this a bug :)

from preact.

Was bit by this today when building preact-portal.
My workaround for now is to use a proxy component that returns what you want:

class Proxy extends Component {
  render({ children }) {
    return children[0];
  }
}


let r = render(<Proxy><Comp /></Proxy>, document.body, r);
r = render(<Proxy><span /></Proxy>, document.body, r);
r = render(<Proxy><Comp /></Proxy>, document.body, r);

from preact.

I believe I have discovered the issue. Preact's diff algorithm tries very hard to retain all state in locals rather than relying on things like Array.prototype.length (for performance). When a keyed VNode is determined to be unused during diff, it gets appended to a list of children that are reclaimed at the end of the diff. However, there was a conditional around the reclamation to avoid operating on empty sparse Arrays, and one of the values was not being updated to reflect newly orphaned keyed VNodes.

In the screenshot below (from @andrewn's Codepen repro), the value of childrenLen is correctly updated to be 1 (one orphaned VNode), however, the value of min is left unmodified after diffing, which means it remains as 1. This meant Preact was skipping removal of the VNode entirely.

I'll get a fix in right away, but I want more tests around keys in order to cover edge cases like this.

Thanks to both of you for your help!

from preact.

@kruczy Thanks again for your repro. I just released 4.1.2, and have included your JSFiddle as a new test.

Here is your repro running against Preact 4.1.2 showing the intended behavior: JSFiddle.

from preact.

Great 👍 Thanks!

from preact.