Differentiate between single and double click in React - reactjs

Question

Trying to find out what is the best way of differentiating between single and double click in a React component.
The built-in mouse events (onClick and onDoubleClick) work fine if you don't want apply them on the same DOM element. There is the jQuery dblclick which I don't want to use. There is also a React Timer Mixin which could be used, but I use ES6 classes so then I would need to use something like React Mixin and I just think it's an overkill for doing such a simple thing.
From what I found out people would set the timeout on the click event, so I followed that direction and came with this:
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(() => {
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 (
<div>
<button onClick={this.handleClick}>Click me</button>
</div>
)
}
}
It works, but I'm trying to find out if there is a better way of doing it.
Edit:
The big problem with this is that setTimeout is async, so I added another check (if (this.state.clickCount === 1) {), but that seems wrong to me.
Another problem with this is the delay, the double click is called immediately, but the single click will be called after whatever timeout was set (around 300ms).

Answer 1

I know this is an old question but I spun my wheels on this problem a bit also, so thought I'd share my solution for those who also end up here.
const DOUBLECLICK_TIMEOUT = 300;
handleImagePress = () => {
this.setState({ pressCount: this.state.pressCount+1 });
setTimeout(() => {
if (this.state.pressCount == 0) { return }
if (this.state.pressCount == 1) {
// Do single press action
} else if (this.state.pressCount == 2) {
// Do double press action
}
this.setState({ pressCount: 0 });
}, DOUBLECLICK_TIMEOUT)
}