Shadcn.io is not affiliated with official shadcn/ui
React useUnmount Hook
React useUnmount hook for cleanup on component unmount. Fresh callback via ref, no stale closures. TypeScript ready.
React useUnmount Hook preview
Run cleanup logic when a component unmounts with useUnmount. Pass a function and it executes exactly once when the component leaves the DOM. The callback is stored in a ref and updated every render, so it always has access to the latest props and state. No stale closure issues like raw useEffect cleanup. Throws immediately if passed a non-function to catch errors early. Uses empty dependency array internally—cleanup only runs on actual unmount, not re-renders. Perfect for analytics tracking, closing connections, clearing timers, releasing resources, or any teardown logic. SSR safe, works with Next.js App Router.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:
use shadcnio to install the use-unmount hook into my projectRelated Components
React useIsMounted Hook
Check if component is mounted
React useEventCallback Hook
Stable callback with fresh state
React useTimeout Hook
Auto-cleanup setTimeout
React useInterval Hook
Auto-cleanup setInterval
React useEventListener Hook
Auto-cleanup event listeners
React useScrollLock Hook
Release scroll lock on unmount
FAQ
Was this page helpful?
Sign in to leave feedback.