Synchronous Event Bubbling/Mounting Difference vs React

(Moved from https://github.com/developit/preact-compat/issues/418, apologies if this is the wrong place)

Hey there!

First, thank you for the awesome library 👍 , I’ve had a surprisingly painless process converting multiple React apps to Preact. I did, however, run into an issue the other day regarding what I believe to be a difference between event handling and the component lifecycle in React and Preact. Basically:

• In React, components rendered due to an event (i.e. a Modal opening in response to a click event) are mounted after that event bubbles to the document root.
• In Preact (with or without preact-compat), the newly-mounted component mounts before that event bubbles, and thus is able to capture it, which can lead to unexpected issues. I noticed this after registering document event listeners on a Modal’s componentDidMount, and seeing that it started capturing the click event that caused the modal to open in the first place.

I have provided a demo below for both the Preact and React use case. If you check the console output you should be able to see the difference I’m describing:

• Preact Demo

// console logs on button click:
1) Example mounted
2) Document noticed a click event
3) Example noticed a document click event

• React Demo (happens in React ^15.4.0 as well).

// console logs on button click:
1) Document noticed a click event
2) Example mounted

For Reference

document.addEventListener('click', () => {
  console.log('Document noticed a click event')
})

export class Example extends Component {
  componentDidMount () {
    console.log('Example mounted!')
    // we can fix this by wrapping the addEventListener call in a `setTimeout` to
    // let the current call stack complete.
    document.addEventListener('click', (e) => {
      console.log('Example noticed a document click event')
      this.props.onClose()
    })
  }

  render () {
    return <h1>Example Thing</h1>
  }
}

export default class App extends Component {
  state = { show: false }

  render () {
    return (
      <div>
        <button onClick={() => this.setState({ show: true })}>Show Thing</button>
        {this.state.show && <Example onClose={() => this.setState({ show: false })} />}
      </div>
    )
  }
}

Thanks in advance!

[davezuko]

Always fun to revisit issues from almost 2 years back. I’m actually using Preact X in a new project and thus far haven’t encountered the issue.

[thysultan]

@developit Yes i suppose that is a caveat with event delegation. I’m out of ideas that maintain sync DOM operations.