Change:
Do you want to request a feature or report a bug? I want to report a bug. What is the current behavior? Event handlers on elements are fired twice, when hovering from one element onto the next. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle () or CodeSandbox () example below: What is the expected behavior? Event handlers should only fire once. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 16.8.4 ReactDOM 16.8.4 Chrome 76.0.3809.132 Firefox 69.0 (64-Bit) Edge 44..267.0
After testing it again and again, I found how to reproduce it: Step 1, render a new component inside a rendered component; Step 2, inside the new component, mouse enter a node from its sibling. Current result: onMouseEnter is called more than once. Demo: We may change the issue title because it's not related with . I've made a test and fixture for this: Hope the information can be helpful. I still have no idea how to fix it. If there's no one working on this, I would like to pick this up. There's a similar issue Do you have any advice?
Go for it,
Let's close this? I see the fix was merged in .

Discussion:
import FixtureSet from '../../FixtureSet'; import MouseMovement from './mouse-movement'; <ins> import MouseEnter from './mouse-enter'; </ins> const React = window.React;

return ( <FixtureSet title="Mouse Events"> <MouseMovement /> <ins> <MouseEnter /> </ins> </FixtureSet> ); }

<ins> import TestCase from '../../TestCase'; const React = window.React; const ReactDOM = window.ReactDOM; const MouseEnter = () => { const containerRef = React.useRef(); React.useEffect(function() { const hostEl = containerRef.current; ReactDOM.render(<MouseEnterDetect />, hostEl, () => { ReactDOM.render(<MouseEnterDetect />, hostEl.childNodes[1]); }); }, []); return ( <TestCase title="Mouse Enter" description="" affectedBrowsers="Chrome, Safari, Firefox"> <TestCase.Steps> <li>Mouse enter the boxes below, from different borders</li> </TestCase.Steps> <TestCase.ExpectedResult> Mouse enter call count should equal to 1; <br /> Issue{' '} <a rel="noopener noreferrer" target="_blank" href="https://github.com/facebook/react/issues/16763"> #16763 </a>{' '} should not happen. <br /> </TestCase.ExpectedResult> <div ref={containerRef} /> </TestCase> ); }; const MouseEnterDetect = () => { const [log, setLog] = React.useState({}); const firstEl = React.useRef(); const siblingEl = React.useRef(); const onMouseEnter = e => { const timeStamp = e.timeStamp; setLog(log => { const callCount = 1 + (log.timeStamp === timeStamp ? log.callCount : 0); return { timeStamp, callCount, }; }); }; return ( <React.Fragment> <div ref={firstEl} onMouseEnter={onMouseEnter} style={{ border: '1px solid #d9d9d9', padding: '20px 20px', }}> Mouse enter call count: {log.callCount || ''} </div> <div ref={siblingEl} /> </React.Fragment> ); }; export default MouseEnter; </ins>

accumulateEnterLeaveDispatches(leave, enter, from, to); <ins> if (isOutEvent && from && nativeEventTarget !== fromNode) { return [leave]; } </ins> return [leave, enter]; }, };

expect(childEnterCalls).toBe(1); expect(parentEnterCalls).toBe(0); }); <ins> // Test for https://github.com/facebook/react/issues/16763. it('should call mouseEnter once from sibling rendered inside a rendered component', done => { const mockFn = jest.fn(); class Parent extends React.Component { constructor(props) { super(props); this.parentEl = React.createRef(); } componentDidMount() { ReactDOM.render(<MouseEnterDetect />, this.parentEl.current); } render() { return <div ref={this.parentEl} />; } } class MouseEnterDetect extends React.Component { constructor(props) { super(props); this.firstEl = React.createRef(); this.siblingEl = React.createRef(); } componentDidMount() { this.siblingEl.current.dispatchEvent( new MouseEvent('mouseout', { bubbles: true, cancelable: true, relatedTarget: this.firstEl.current, }), ); expect(mockFn.mock.calls.length).toBe(1); done(); } render() { return ( <React.Fragment> <div ref={this.firstEl} onMouseEnter={mockFn} /> <div ref={this.siblingEl} /> </React.Fragment> ); } } ReactDOM.render(<Parent />, container); }); </ins> });