How To Handle double-click events in React

By onjsdev

Feb 8th, 2024

Handling double-click events in React involves creating a mechanism to detect when a user double-clicks on a specific element or component. Here's a guide to achieving this in a React application:

Understanding Double-Click Events:

  • A double-click event occurs when a user rapidly clicks an element twice in quick succession.
  • React doesn't have a dedicated onDoubleClick event handler. You can leverage the onClick event and check for specific click counts or use more advanced methods.

Checking Click Count with event.detail:

function handleClick(event) {
  if (event.detail === 2) {
    // Double-click logic here

<button onClick={handleClick}>Click me</button>


  • event.detail property provides the exact number of clicks (0 for single, 1 for double, etc.).
  • Check if event.detail is 2 to confirm a double-click.
  • This method avoids conflicts with single-click handlers but may fire multiple times for triple-clicks.

Leveraging useRef for Time-Based Detection:

import { useRef, useState } from 'react';

function MyComponent() {
  const lastClickRef = useRef(null);

  const [doubleClicked, setDoubleClicked] = useState(false);

  const handleClick = () => {
    const now = Date.now();
    if (lastClickRef.current && now - lastClickRef.current < 200) {
      // Double-click logic here
    lastClickRef.current = now;

  return (
    <button onClick={handleClick}>
      {doubleClicked ? 'Double-clicked!' : 'Click me'}


  • useRef stores the timestamp of the previous click.
  • Check if the time difference between previous and current click is within a threshold (e.g., 200ms).
  • This method handles any number of clicks but requires defining a time threshold and handles the double-clicked state with useState.


That's it! You've successfully set up and handled double-click events in a React component.