react Обработать двойной клик, если он сделан, без обработки одинарного double click / click

Для обработки отдельно одинарного и двойного клика, можно использовать такой пользовательский хук:

import { useMemo, useRef } from 'react';

export type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;

export function useClickAndDoubleClickHandler(onSingleClick: ClickHandler, onDoubleClick: ClickHandler, latency = 250) {
  const clickCount = useRef(0);

  const clickHandler = useMemo(() => {
    return (event: React.MouseEvent<HTMLElement>) => {
      clickCount.current += 1;
      setTimeout(function () {
        if (clickCount.current === 1) {
          onSingleClick(event);
        } else if (clickCount.current === 2) {
          onDoubleClick(event);
        }
        clickCount.current = 0;
      }, latency);
    };
  }, [onSingleClick, onDoubleClick, latency]);

  return clickHandler;
}

Идея (использование общего обработчика с таймаутом, замкнутого на переменную из внешней области видимости) взята из реализации use-double-click , но в отличие от нее:

  1. кеширует обработчик через useMemo()
  2. не использует useEffect, чтобы позволяет, если требуется не рендерить элемент, на который вы ставите обработчик а также в целом уйти от установки/прокидывания рефов.

Какие еще варианты

Какие есть варианты (оба связаны искусственной с задержкой обработки одинарного клика):

  1. Сделать свой промис, опираясь на который ждать в одинарном клике, не будет ли он отменен в в обработчике двойного клика. Внимательно этот вариант не изучался
  2. Использовать готовое решение - пользовательский хук для того же самого, например, use-double-click

    Минусом в реализации use-double-click является то, что эта реализация опирается внутри на useEffect и в любом случае будет пытаться поставить обработчик, что приведет к ошибке, если вы так и не отрендерите свой копонент очередной раз (напр, потому что текст, по которому вы делаете двойной клик, заменился на поле ввода) -- решить этом можно с помощью подхода/кода в начале этой заметки

-- может есть, что еще, но в нашем случае пока что успели рассмотреть только эти решения

Key Words for FKN + antitotal forum (CS VSU):