React useIsMounted Hook
React useIsMounted hook for mount state detection. Prevent memory leaks from async operations and avoid setState warnings with TypeScript support for Next.js.
Getting setState warnings on unmounted components?
Join our Discord community for help from other developers.
Ever tried to handle async operations in React and got hit with "Can't perform a React state update on an unmounted component" warnings? You know the drill—API calls finish after navigation, timers fire after component cleanup, file uploads complete after user cancellation. This free open source React useIsMounted custom hook handles all that mount state tracking so you can focus on building async features instead of debugging memory leak warnings in your React applications.
useIsMounted showcase
Safe async operations with mount state checking:
This free open source React hook simplifies async safety with TypeScript support for modern JavaScript applications. Whether you're building API integrations, file uploads, or timer features in your Next.js projects, this React hook keeps your memory usage clean.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/use-is-mounted.jsonnpx shadcn@latest add https://www.shadcn.io/registry/use-is-mounted.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-is-mounted.jsonbunx shadcn@latest add https://www.shadcn.io/registry/use-is-mounted.jsonWhy most mount detection implementations suck
Look, you could keep tracking mount state manually with useRef and cleanup functions. But then you hit the async complexity—every API call needs mount checks, every timer needs cleanup, every async operation becomes a potential memory leak in React applications.
Most developers manually track mount state with useRef flags and forget to update them properly, causing memory leaks in TypeScript components. Or they create new functions on every render that break effect dependencies, leading to infinite loops. Some skip mount checking entirely and live with constant React warnings about setState on unmounted components in Next.js projects.
This React hook provides a stable function that always tells you if the component is still mounted in JavaScript applications. One simple check prevents all those setState warnings and memory issues.
Plus it's memoized properly. The function reference stays stable across renders, so you can safely add it to dependency arrays without causing effect loops in React development.
This free open source React hook manages mount detection while you focus on building features. Whether you're creating React applications, Next.js dashboards, or TypeScript components, reliable async safety keeps your JavaScript development clean.
Features
- Memory leak prevention by checking mount state before setState operations in React applications
- Async operation safety preventing updates on unmounted components in TypeScript projects
- Stable function reference memoized with useCallback to prevent re-renders in Next.js development
- Zero dependencies using only native React hooks for minimal overhead in JavaScript applications
- TypeScript support with complete type definitions and return types for React frameworks
- Performance optimized with efficient mount tracking using useRef patterns
- Free open source designed for modern React development workflows
When you'll actually use this
Real talk—this isn't for every async operation in React applications. Simple useEffect cleanup handles most cases fine. But when you have complex async flows or can't control timing, this React hook prevents the headaches in Next.js projects.
Perfect for:
- API calls - Prevent state updates after component unmounts built with TypeScript
- File uploads - Cancel operations safely when users navigate away using React patterns
- Timers and intervals - Safe cleanup of async operations in JavaScript applications
- WebSocket connections - Prevent memory leaks in real-time apps in React components
- Animation callbacks - Stop updating state after component cleanup in Next.js applications
- Data polling - Prevent setState warnings during navigation using TypeScript safety
API Reference
useIsMounted
useIsMounted(): () => booleanReturns a stable function that checks if the component is currently mounted.
| Return | Type | Description |
|---|---|---|
isMounted | () => boolean | Function returning true if mounted, false if unmounted |
Common gotchas
Add isMounted to dependency arrays: The function is memoized and stable, so it's safe to include in useEffect dependencies without causing loops in React applications.
Check before every setState operation: Don't just check at the end of async operations—check before any state update that could happen after component unmount in TypeScript components.
This prevents warnings, not cleanup: You still need proper cleanup for subscriptions, timers, and event listeners in Next.js projects. This React hook just prevents setState warnings.
Don't use for every async operation: If you can handle cleanup properly in useEffect return functions, that's often cleaner than mount checking in JavaScript development.
Function call requirement: Remember to call isMounted() with parentheses, not just isMounted in React frameworks. The hook returns a function that must be executed.
Async timing considerations: Check mount state immediately before setState, not at the start of async operations in TypeScript projects. Component state can change during long-running operations.
Related hooks you will also like
useUnmount
Execute cleanup functions when component unmounts safely
useEventCallback
Stable callback references that work with mount state checks
useInterval
Interval management with automatic cleanup and mount safety
useTimeout
Timeout management with cleanup that prevents memory leaks
useCopyToClipboard
Clipboard operations that use mount checks for safety
useDebounceCallback
Debounced callbacks with automatic cleanup and mount safety
Questions you might have
React useIsClient Hook
React useIsClient hook for client-side detection. Prevent hydration mismatches and safely access browser APIs with TypeScript support for Next.js apps.
React useIsomorphicLayout Hook
React useIsomorphicLayoutEffect hook for SSR-safe layout effects. Prevent hydration warnings while maintaining synchronous DOM access with TypeScript.