title: Differentiate between single and double click in React
body: <p>Trying to find out what is the best way of differentiating between single and double click in a React component.</p>
  
  <p>The built-in <a href="https://facebook.github.io/react/docs/events.html#mouse-events" rel="nofollow">mouse events</a> (onClick and onDoubleClick) work fine if you don't want apply them on the same DOM element. There is the <a href="https://api.jquery.com/dblclick/" rel="nofollow">jQuery dblclick</a> which I don't want to use. There is also a <a href="https://github.com/reactjs/react-timer-mixin" rel="nofollow">React Timer Mixin</a> which could be used, but I use ES6 classes so then I would need to use something like <a href="https://github.com/brigand/react-mixin" rel="nofollow">React Mixin</a> and I just think it's an overkill for doing such a simple thing. </p>
  
  <p>From what I found out people would set the timeout on the click event, so I followed that direction and came with this:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>import React, { Component } from 'react'
  
  export default class Click extends Component {
    constructor() {
      super()
      this.handleClick = this.handleClick.bind(this)
      this.state = {
        clickCount: 0
      }
    }
  
    handleClick() {
      let clickCount = this.state.clickCount
      let singleClickTimer
      clickCount++
  
      this.setState({ clickCount: this.state.clickCount + 1 })
  
      if (clickCount === 1) {
        singleClickTimer = setTimeout(() =&gt; {
          if (this.state.clickCount === 1) {
            clickCount = 0
            this.setState({ clickCount: 0 })
            console.log('single click')
          }
        }, 300)
      } else if (clickCount === 2) {
        clearTimeout(singleClickTimer)
        clickCount = 0
        this.setState({ clickCount: 0 })
        console.log('double click')
      }
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.handleClick}&gt;Click me&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>It works, but I'm trying to find out if there is a better way of doing it.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>The big problem with this is that <code>setTimeout</code> is async, so I added another check (<code>if (this.state.clickCount === 1) {</code>), but that seems wrong to me.</p>
  
  <p>Another problem with this is the delay, the <code>double click</code> is called immediately, but the <code>single click</code> will be called after whatever timeout was set (around 300ms).</p>