The hook returns the current boolean alongside a setter that flips it. Using the functional form setOn((v) => !v) is essential: a plain setOn(!on) captures on from render scope and breaks if two toggles fire in the same tick. The signature [value, toggle] mirrors useState so destructuring stays familiar. This is the version you want for password show / hide, drawer open / close, and any one-shot boolean.

The minimal version cannot pin the state to a specific value, which matters for handlers like onMouseEnter (always show) and onMouseLeave (always hide). Accepting an optional explicit boolean keeps both behaviours in one helper. The check typeof next === 'boolean' avoids treating React synthetic event objects as truthy values when callers pass the toggle directly to onClick. This shape is what most production codebases land on after a couple of refactors.

Sometimes the state has more than two values: theme settings (light / dark / system), tab orders, or sort directions (none / asc / desc). useCycle keeps an index instead of a boolean and wraps with modulo so the cycle never overflows. The current value (not the index) is returned so call sites read like theme === 'dark'. This is conceptually a generalisation of useToggle and a frequent pattern in design-system primitives.