Multiple onMouseEnter calls using HOC and setState()

The exact same code works in React but it’s different in Preact. The onMouseEnter event is called indefinitely when you hover on one of the items (even if you don’t move the mouse anymore). I’d expect it to be called only once when hovering between items but it seems like the setState() is re-calling it every time?

React:

const Tooltip = ({ text }) => <div>{text}</div>;
const hoverable = ComposedComponent => class extends React.Component {

    handleMouseEnter() {
        console.log(this.props, 'mouseenter');
        this.props.onEnter();
    }

    render() {
        return (
            <div onMouseEnter={this.handleMouseEnter.bind(this)}>
                <ComposedComponent/>
            </div>
        );
    }
};

class App extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            text: 'bla'
        }
    }

    render() {
        const getElements = () => {
            const hoverables = [];
            ['a', 'b', 'c'].forEach((element) => {
                const Hoverable = hoverable(() => <div>{element}</div>);
                hoverables.push(<Hoverable key={element} onEnter={() => this.setState({ text: element })}/>);
            });
            return hoverables;
        }


        return (
            <div>
                <div>
                    {getElements()}
                </div>
                <Tooltip text={this.state.text}/>
            </div>
        );
    }
}

ReactDOM.render(<App/>, document.getElementById('container'));

Preact:

/** @jsx h */
const { h, render, Component } = preact;

const Tooltip = ({ text }) => <div>{text}</div>;
const hoverable = ComposedComponent => class extends Component {

    handleMouseEnter() {
        console.log(this.props, 'mouseenter');
        this.props.onEnter();
    }

    render() {
        return (
            <div onMouseEnter={this.handleMouseEnter.bind(this)}>
                <ComposedComponent/>
            </div>
        );
    }
};

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            text: 'bla'
        }
    }

    render() {
        const getElements = () => {
            const hoverables = [];
            ['a', 'b', 'c'].forEach((element) => {
                const Hoverable = hoverable(() => <div>{element}</div>);
                hoverables.push(<Hoverable key={element} onEnter={() => this.setState({ text: element })}/>);
            });

            return hoverables;
        }


        return (
            <div>
                <div>
                    {getElements()}
                </div>
                <Tooltip text={this.state.text}/>
            </div>
        );
    }
}

render(<App/>, document.body);

[yaodingyd]

React acts “correct” because its synthetic events.

Preact has infinite events because it’s how DOM and native events works, I also created a example with vanilla js: link. Move mouse on text and watch console log.

This is because on mouse enter, old div is removed and new div is created, added same event listener and appended to DOM. Since this is a new node, event listener would trigger, thus the infinite loop. Preact essentially does the same thing.

For react, I would say because of the synthetic events system, react would intercept the following invoke as it might be seen as the same event listener.

I would say this is a “won’t fix” for Preact: no similar event system will be added into Preact in the near future.

[marvinhagemeister]

@yaodingyd Oh sorry, my bad :S