Implement useClickOutside

Loading problem workspace…

Implement useClickOutside · UIHero

Implement useClickOutside

Create a reusable pointer-outside hook with fresh callbacks, optional disabling, and complete listener cleanup.

EasyReact Hooks

30 min0% acceptance

Description

Implement useClickOutside for a React ref. It calls the latest callback for pointer events outside the referenced node, ignores inside events, can be disabled, does not churn listeners on every render, and always removes global listeners on unmount.

Requirements

The solution exports the required useClickOutside API from the editable module.
Outside pointer works deterministically for the documented normal, boundary, and repeated-use scenarios.
Inside ignored works deterministically for the documented normal, boundary, and repeated-use scenarios.
Latest callback works deterministically for the documented normal, boundary, and repeated-use scenarios.
Disabled state works deterministically for the documented normal, boundary, and repeated-use scenarios.
Listener cleanup works deterministically for the documented normal, boundary, and repeated-use scenarios.
Rerender stability works deterministically for the documented normal, boundary, and repeated-use scenarios.

Fresh callback

Input

Rerender with a new callback and click outside

Expected output

Only the newest callback runs without reinstalling the listener

Explanation

A callback ref separates current behavior from listener lifetime.

Constraints

Listen for pointerdown on document
Ignore events whose composed path includes the referenced node
Remove every installed listener on cleanup

Hints

Hint 1

Store the latest callback in a ref so the document listener can stay stable.

Hint 2

Check disabled and node containment at event time.

Hint 3

Keep setup dependencies limited to values that truly require listener replacement.

Reacthooksevents

Loading problem workspace…