Solution

You'll combine a single restartable timer with a set of activity listeners: every event clears and restarts the timer and marks the user active, and the timer firing is the only thing that marks them idle.

The problem, in plain English

You want to know when a user has walked away. "Idle" doesn't mean a fixed moment — it means "nothing has happened for a while." So the clock can't run once and stop; it has to keep getting pushed forward every time the user does anything. Think of a kitchen timer you reset to zero each time someone walks past: it only ever rings if the room stays empty long enough. Here the "ring" is idle = true, the "walking past" is any of mousemove, mousedown, keydown, touchstart, scroll, or resize, and "long enough" is timeout milliseconds.

This is the first hook that needs both halves of the toolkit at once: a setTimeout (the countdown) and event listeners (the resets). Neither alone is enough — a timer with no listeners can't react to activity, and listeners with no timer have nothing to schedule.

The mental model

There is exactly one timer at a time. When it fires, you go idle. Every activity listener does the same two things: set idle = false (the user is clearly here) and restart the timer from zero. Because the timer is cleared and re-created on each event, its deadline keeps sliding into the future as long as activity keeps coming. Idle only happens in the gap — a stretch of timeout ms where no listener fired and the timer was left alone to reach the end.

A first attempt

The obvious version schedules the idle timer once on mount and stops there:

const { useState, useEffect } = require('react');

function useIdle(timeout) {
  const [idle, setIdle] = useState(false);

  useEffect(() => {
    const id = setTimeout(() => setIdle(true), timeout);
    return () => clearTimeout(id);
  }, []);

  return idle;
}

This goes idle on a fixed schedule no matter what the user does. There are no listeners, so a mouse move or keystroke changes nothing — timeout ms after mount the timer fires and the hook reports idle even if the user has been typing the whole time. And once it's idle there's no path back to active, because nothing ever calls setIdle(false). The missing pieces are the listeners that reset the countdown, and the logic that restarts the timer on each event.

The working solution

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

function useIdle(timeout) {
  const [idle, setIdle] = useState(false);
  // Hold the timer id in a ref so the same handler can clear the previous
  // timer before scheduling the next one, across many events, without
  // re-running the effect.
  const timerRef = useRef(null);

  useEffect(() => {
    // (Re)start the countdown: cancel any pending timer, then schedule a fresh
    // one. After `timeout` ms with nobody calling this again, idle flips true.
    const start = () => {
      clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => setIdle(true), timeout);
    };

    // Any activity proves the user is here: wake up and restart the clock.
    const onActivity = () => {
      setIdle(false);
      start();
    };

    const events = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'scroll', 'resize'];
    events.forEach((name) => window.addEventListener(name, onActivity));
    start(); // begin the first countdown immediately

    // Cleanup must tear down BOTH resources: the pending timer and every
    // listener we added (same onActivity reference, so removal actually works).
    return () => {
      clearTimeout(timerRef.current);
      events.forEach((name) => window.removeEventListener(name, onActivity));
    };
  }, [timeout]);

  return idle;
}

module.exports = { useIdle };

The key shift from the naive version is that the timer is no longer a one-shot. The start helper clears then re-schedules, and every activity listener calls it — so each event slides the deadline forward and onActivity also resets idle to false. The timer id lives in a ref because the same listeners need to clear whatever the previous countdown was, call after call, without the effect re-running. The effect depends on [timeout] so changing the threshold rebuilds the countdown at the new rate.

Walking through one call

Take useIdle(80) and a single mouse move at t=50:

1. Mount. idle is false. The effect attaches the six listeners and calls start(), scheduling a timer to fire at t=80.
2. t=50, mouse moves. The mousemove listener runs onActivity: it sets idle = false (already false, no change) and calls start(), which clearTimeouts the t=80 timer and schedules a new one for t=130.
3. t=80 arrives. Nothing happens — that timer was cleared at t=50. The naive version would have gone idle here; this one is still active.
4. No further activity. At t=130 the live timer fires setIdle(true). The hook now returns true.
5. t=140, user clicks. The mousedown listener runs onActivity: setIdle(false) wakes the hook back up, and start() schedules the next idle deadline for t=220.
6. Unmount. The cleanup runs clearTimeout on the pending timer and removeEventListener for all six events, so nothing fires into the gone component.

Gotchas

• Setting the timer once and never resetting it. A lone setTimeout(() => setIdle(true), timeout) goes idle on schedule regardless of activity — exactly the naive bug. Fix: clear and re-schedule the timer inside the activity handler so its deadline slides forward on every event.
• Forgetting to set idle back to false. If onActivity only restarts the timer but never calls setIdle(false), the hook can never recover once it's gone idle. Fix: every activity handler sets idle = false and restarts the timer.
• Removing a different function than you added. Passing a fresh arrow to removeEventListener than the one given to addEventListener removes nothing, leaking all six listeners. Fix: define onActivity once and pass that same reference to both add and remove.
• Cleaning up only the timer or only the listeners. Both leak independently — a leftover timer fires setIdle into a dead component, and leftover listeners keep handling events forever. Fix: the cleanup must clearTimeout AND remove every listener.

Going further

• Throttling the activity handler. mousemove and scroll can fire hundreds of times a second. Wrapping onActivity in a throttle (call at most once per ~200ms) cuts the work without changing the behavior, since you only need one reset per burst.
• Reporting the idle reason or last-active time. Returning { idle, lastActive } (a timestamp updated in onActivity) lets a banner show "inactive for 4 minutes" instead of a bare boolean.
• Cross-tab idle via the Page Visibility API. Listening to visibilitychange and the document's activity, or syncing through localStorage/BroadcastChannel, lets several tabs of the same app agree on whether the user is truly away.