Preact: ComponentWillMount fired on wrong unkeyed child

Created on 25 Mar 2018 · 3Comments · Source: preactjs/preact

class Test extends Component {
  componentWillMount () {
    console.log('mounting', this.props.name)
  }
  render () {
    return <h4>{this.props.name}</h4>
  }
}

class Application extends Component {
  componentWillMount () {
    window.setTimeout(() => this.setState({loaded: true}), 200)
  }
  render () {
    return <div>
      <Test name='1' />
      {!!(this.state && this.state.loaded) && <Test name='2' />}
      <Test name='3' />
    </div>
  }
}

with preact the console shows this:

mounted 1
mounted 3
mounted 3

with react the console shows the expected:

mounted 1
mounted 3
mounted 2

interestingly, the rendered html is still correct

bug duplicate

Source

adriaanwm

Most helpful comment

Duplicate of #857.

Preact cannot perfectly handle unkeyed same type children mounting/unmounting. The issue is that when Test 2 is mounted, Preact thinks Test 3 as its last DOM and update its props, then mount Test 3 as a new node, so this points to Test 3.