The hook stores the handler in a ref so the listener attached to the DOM stays referentially stable across renders, while still calling the latest handler. This avoids the subtle bug where a handler closure captures stale props. The typeof window guard makes the hook safe in SSR. Reach for this any time you need to listen on window (resize, scroll, online / offline, beforeunload) and want to keep your component bodies clean.

Most listeners are not on window but on a specific element: a popover wrapper for outside-click handling, an input ref for the native change event, a scroll container. Accepting either a ref-shaped object or a raw element keeps the API forgiving. The early-return when there is no node makes the hook safe during the first render before the ref has been assigned. Notice that we do NOT depend on handler for the listener effect, so toggling props does not detach and reattach the listener every render.

Some interactions need to listen for several events at once: a popover dismisser wants both mousedown and touchstart, a focus-within helper wants both focusin and focusout. Accepting an array iterates the same setup once per name and pairs every add with a matching remove. Joining the names for the dependency array gives a stable string identity so the effect does not re-run when the parent passes a new array literal each render. For full type safety wrap this in a TypeScript overload that maps each event name to its payload type.