useIsMounted
Prevent memory leaks by checking component mount state before async operations. Perfect for React applications requiring safe state updates with Next.js integration and TypeScript support.
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.jsonFeatures
- Memory leak prevention by checking mount state before setState operations
- Async operation safety preventing updates on unmounted components
- Zero dependencies using only native React hooks (useRef, useEffect, useCallback)
- TypeScript support with complete type definitions and function return types
- Performance optimized with memoized function reference using useCallback
- shadcn/ui integration compatible with component lifecycle management
Examples
Component Lifecycle Management
Multiple components with different async delays demonstrating safe state updates.
Use Cases
This free open source React component works well for:
- API calls - Prevent state updates after component unmounts with Next.js and TypeScript
- Timers and intervals - Safe cleanup of async operations using React hooks
- File uploads - Cancel operations when components unmount with proper error handling
- WebSocket connections - Prevent memory leaks in real-time applications
API Reference
useIsMounted
| Parameter | Type | Description |
|---|---|---|
| None | - | Hook takes no parameters |
Return Value
| Type | Description |
|---|---|
() => boolean | Function that returns true if component is mounted, false otherwise |
Usage Pattern
import { useIsMounted } from '@repo/use-is-mounted';
function MyComponent() {
const [data, setData] = useState(null);
const isMounted = useIsMounted();
useEffect(() => {
fetchData().then(result => {
if (isMounted()) {
setData(result); // Safe: only updates if still mounted
}
});
}, [isMounted]);
return <div>{data}</div>;
}Implementation Notes
- Returns a stable function reference that won't cause unnecessary re-renders
- Uses useRef to track mount state without triggering component updates
- Cleanup function automatically sets mounted state to false on unmount
- Compatible with React Strict Mode and concurrent features
- Prevents React warnings about setState calls on unmounted components
- Works with any async operation including promises, timeouts, and intervals
useIsClient
React hook that determines if the code is running on the client side (in the browser) for conditional rendering and SSR compatibility.
useIsomorphicLayoutEffect
React hook that uses useLayoutEffect in browser and useEffect during SSR to prevent hydration warnings. Perfect for React applications requiring DOM measurements with Next.js integration and TypeScript support.