useEventListener

Requirements

• Export useEventListener(eventName, handler, target = window, capture = false) as a named and default hook. Return undefined. target may be window, document, an element, or null. A null target disables the subscription.
• eventName is a browser event name. Invoke the current handler exactly once for each matching event, passing the original event object. Do not invoke it during rendering.
• After a rerender, use the latest handler, event name, target, and capture flag. Remove the old subscription when any relevant input changes. Resubscribing to a changed handler is allowed; avoiding resubscription is optional.
• Match capture when removing a listener. Remove every subscription on unmount, and avoid duplicate subscriptions when React replays effects in Strict Mode.
• An unchanged handler, target, eventName, and capture must not trigger unnecessary resubscriptions. Independent hook instances must not overwrite or remove each other’s listeners.
• When window is unavailable during server rendering, the default target is null and no browser APIs may run during render. Passive, once, AbortSignal, and custom event typing are outside scope.
• In TypeScript use K extends keyof WindowEventMap so the event name determines the handler event type. The target is EventTarget | null and capture is boolean. The key map is used for typing common browser events even when the target is an element.

Examples

Input: useEventListener("resize", onResize)
Output: Subscribes on window while mounted.

Input: useEventListener("click", onClick, button, true)
Output: Subscribes on button during the capture phase.

Input: Rerender with target = null
Output: Removes the prior listener and disables events until another target is supplied.