From 5202451d22cb8bc9456724918f93b02e02740033 Mon Sep 17 00:00:00 2001
From: Kir Belevich <kir@belevi.ch>
Date: Mon, 21 Aug 2017 14:25:02 +0200
Subject: [PATCH] Fix `withHoverProps` using `onMouseEnter` and `onMouseLeave`

Because `onMouseOver` and `onMouseOut` bubbles up to the DOM triggering unnecessary re-renders every time you hover on any children of wrapped with this HOC component. `onMouseEnter` and `onMouseLeave` stops this madness and works just like "hover".
---
 src/withHoverProps.js      | 20 ++++++++++----------
 src/withHoverProps.spec.js |  6 +++---
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/withHoverProps.js b/src/withHoverProps.js
index 182acbe..6a055e5 100644
--- a/src/withHoverProps.js
+++ b/src/withHoverProps.js
@@ -9,23 +9,23 @@ export default hoverProps => Target => {
       this.state = {
         hovered: false,
       }
-      this.onMouseOver = this.onMouseOver.bind(this)
-      this.onMouseOut = this.onMouseOut.bind(this)
+      this.onMouseEnter = this.onMouseEnter.bind(this)
+      this.onMouseLeave = this.onMouseLeave.bind(this)
     }
 
-    onMouseOver(...args) {
+    onMouseEnter(...args) {
       this.setState({ hovered: true })
 
-      if (this.props.onMouseOver) {
-        this.props.onMouseOver(...args)
+      if (this.props.onMouseEnter) {
+        this.props.onMouseEnter(...args)
       }
     }
 
-    onMouseOut(...args) {
+    onMouseLeave(...args) {
       this.setState({ hovered: false })
 
-      if (this.props.onMouseOut) {
-        this.props.onMouseOut(...args)
+      if (this.props.onMouseLeave) {
+        this.props.onMouseLeave(...args)
       }
     }
 
@@ -33,8 +33,8 @@ export default hoverProps => Target => {
       return (
         <Target
           {...this.props}
-          onMouseOver={this.onMouseOver}
-          onMouseOut={this.onMouseOut}
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
           {...this.state.hovered && hoverProps}
         />
       )
diff --git a/src/withHoverProps.spec.js b/src/withHoverProps.spec.js
index e4ce837..a220703 100644
--- a/src/withHoverProps.spec.js
+++ b/src/withHoverProps.spec.js
@@ -26,7 +26,7 @@ describe('withHoverProps', () => {
       componentDidMount() {
         setTimeout(() => {
           this.updated = true
-          this.props.onMouseOver()
+          this.props.onMouseEnter()
         })
       }
 
@@ -63,12 +63,12 @@ describe('withHoverProps', () => {
     const root = document.createElement('div')
     class Target extends Component {
       componentDidMount() {
-        this.props.onMouseOver()
+        this.props.onMouseEnter()
       }
 
       componentDidUpdate() {
         setTimeout(() => {
-          this.props.onMouseOut()
+          this.props.onMouseLeave()
           setTimeout(() => {
             equal(root.querySelector('span').textContent, '')
             done()