Solution

You'll start a setTimeout on press and store its id in a ref, fire the callback when it completes, and clear it from a shared cancel handler wired to every "press ended" event.

The problem, in plain English

A long-press is a race between a clock and the user's finger. On press you start a timer for delay ms; if it finishes first, that's a long-press — fire the callback. If the user lifts or drags off the element first, cancel the timer so nothing happens (that was just a tap). The whole implementation is "start a timer, clear a timer," but the timer id has to live somewhere both the start and cancel handlers can see and that survives re-renders — which is exactly a ref.

The mental model

Two handlers over one ref. start (bound to mouse-down and touch-start) schedules a timeout and stashes its id in a ref. cancel (bound to mouse-up, mouse-leave, and touch-end) reads that ref and clears the timeout if one is pending. If the timeout instead runs to completion, it invokes the callback and nulls the ref. So every "press began" event points at start, every "press ended or interrupted" event points at cancel, and the ref is the single source of truth for "is a press being timed right now?"

A first attempt

The naive version keeps the timer id in a local variable:

function useLongPressNaive(callback, delay = 400) {
  let timer = null; // reset to null on EVERY render
  const start = () => {
    timer = setTimeout(callback, delay);
  };
  const cancel = () => clearTimeout(timer);
  return { onMouseDown: start, onMouseUp: cancel };
}

timer is a local, re-created as null on every render. The start and cancel returned to your element close over the timer from the render they were built in — and if the component re-renders between press and release (common, since firing state changes things), cancel sees a different timer variable than the one start set, so clearTimeout clears nothing and a "cancelled" press still fires. The timer id must persist across renders: a ref.

The working solution

const { useCallback, useRef } = require('react');

function useLongPress(callback, { delay = 400 } = {}) {
  const timeout = useRef(null);

  const start = useCallback(
    (event) => {
      timeout.current = setTimeout(() => {
        callback(event);        // long-press completed
        timeout.current = null; // done; nothing to cancel
      }, delay);
    },
    [callback, delay],
  );

  const cancel = useCallback(() => {
    if (timeout.current) {
      clearTimeout(timeout.current); // released/left early
      timeout.current = null;
    }
  }, []);

  return {
    onMouseDown: start,
    onMouseUp: cancel,
    onMouseLeave: cancel,
    onTouchStart: start,
    onTouchEnd: cancel,
  };
}

module.exports = { useLongPress };

timeout is a ref, so the id set in start is the same id cancel reads, no matter how many renders happen in between. start schedules the timeout, capturing the event to forward to callback; when it completes it fires the callback and nulls the ref (so a later cancel is a harmless no-op and the press can't fire twice). cancel clears the pending timeout only if one exists. Wiring start to both mouse-down and touch-start, and cancel to up/leave/end, makes it work for mouse and touch with one code path. start is memoized on callback/delay so it's stable while those are.

Walking through one call

Spread the handlers on a button, delay = 400. First the user holds for 500ms, then later taps for 100ms:

• hold — mousedown — start(e) runs timeout.current = setTimeout(…, 400).
• +400ms — the timeout fires: callback(e) runs (menu opens), timeout.current = null.
• mouseup at +500ms — cancel runs; timeout.current is already null, so it's a no-op. The press fired exactly once.
• tap — mousedown — start schedules a new timeout.
• mouseup at +100ms — cancel runs; timeout.current is set, so clearTimeout cancels it and nulls the ref. The 400ms timeout never fires — a tap, not a long-press.

Gotchas

• Timer id in a local/state — a local resets each render (start and cancel desync); state would re-render on every press. Use a ref.
• Not cancelling on leave — dragging off the element mid-press should abort; wire onMouseLeave (and touch move/cancel in production) to cancel.
• Double-fire — null the ref when the timeout completes so a trailing cancel (or a stray) can't act on a stale id.
• Not clearing on unmount — a real hook should also clear the timer in an effect cleanup so a pending press doesn't fire after the element is gone.

Going further

• Movement threshold — cancelling only past a few pixels of movement (via touchmove) lets a slightly shaky finger still count as a hold.
• onStart/onFinish/onCancel callbacks — richer libraries emit lifecycle events so the UI can show a "hold progress" ring.
• Pointer Events — using onPointerDown/onPointerUp unifies mouse, touch, and pen into a single set of handlers, replacing the mouse+touch pair.