Preact: Component ignores the "key" attribute when it is the only child of another Component

Created on 3 Aug 2016 · 6Comments · Source: preactjs/preact

When a component returns in render() methon only one of its chilren, for example:

class Router extends Component {
  render({ url, children }) {
    return children.find(c => c.attributes.path === url);
  }
}

it ignores the key attributes from component's children. And then children of same type are patched in place by virtual dom algorithm instead of mounting / unmounting. Like if there are no key attributes at all.
I now that Preact recycles DOM nodes and even components instead of render them again. But if we modify code like that:

class Router extends Component {
  render({ url, children }) {
    return (
      <div>
        { children.find(c => c.attributes.path === url) }
      </div>
    );
  }
}

then everethyng works fine and components are unmounted. Fore details please see JSFiddle

And it seems that in React this bug is not present. See JSFiddle

Why it is matter for me? Because I want to port my application from KnockoutJS to Preact.
Also I need some routing setup. And now I end up with followig code:

import { h, Component, render } from "preact";
import { Router } from "preact-router";

class KnockoutPage extends Component {
  shouldComponentUpdate = () => false;
  componentDidMount() {
    // initialize Knockout component
  }
  componentWillReceiveProps({ url, matches }}) {
    // transfer props to Knockout component
  }
  componentWillUnmount() {
    // dispose Knockout component
  }
  render({ name }) {
    let binding = `component: { name: '${ name }', params: $rawData }`
    return <div data-bind={ binding }></div>
  }
}

route((
  <Router>
    <KnockoutPage key="1" path="/foo" name="foo-page-component" />
    <KnockoutPage key="2" path="/bar" name="bar-page-component" />
  </Router>
), document.body);

P.S. Sorry for my poor English

bug compat has fix

Source