![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n Advanced React hook for real-time browser memory monitoring\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-memory-monitor.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/use-memory-monitor.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/use-memory-monitor?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/use-memory-monitor.svg?style=flat-square&color=007acc\")
\n \n ![\"coverage\"](\"https://img.shields.io/badge/coverage-95%25-brightgreen?style=flat-square\"){kind=icon}
\n Installation •\n Quick Start •\n API Reference •\n Examples •\n Browser Support •\n License\n
\n\n\n \n 📚 View Storybook Demo\n \n
\n\n---\n\n## Overview\n\n`@usefy/use-memory-monitor` is a comprehensive React hook for monitoring browser memory usage in real-time. It provides heap metrics, memory leak detection, threshold-based alerts, history tracking, and snapshot comparison capabilities.\n\n**Part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem** — a collection of production-ready React hooks designed for modern applications.\n\n### Why use-memory-monitor?\n\n- **Real-time Monitoring** — Track heap usage, total heap, and memory limits in real-time\n- **Leak Detection** — Automatic memory leak detection using linear regression analysis\n- **Threshold Alerts** — Configure custom `warning`/`critical` severity thresholds\n- **Memory Snapshots** — Take named snapshots and compare memory usage between points in time\n- **History Tracking** — Maintain a circular buffer of historical memory data with trend analysis\n- **Tab Visibility Optimization** — Automatically pauses monitoring when tab is hidden (and resumes only work it paused)\n- **TypeScript First** — Full type safety with comprehensive exported interfaces\n- **SSR Compatible** — Safe to use with Next.js, Remix, and other SSR frameworks\n- **Browser Fallbacks** — Graceful degradation in browsers without full API support\n- **Well Tested** — Comprehensive test coverage (242 tests) with Vitest\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/use-memory-monitor\n\n# yarn\nyarn add @usefy/use-memory-monitor\n\n# pnpm\npnpm add @usefy/use-memory-monitor\n```\n\n### Peer Dependencies\n\nThis package requires React 18 or 19:\n\n```json\n{\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\"\n }\n}\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { useMemoryMonitor } from \"@usefy/use-memory-monitor\";\n\nfunction MemoryMonitor() {\n const {\n heapUsed,\n heapTotal,\n heapLimit,\n isSupported,\n severity,\n formatted,\n } = useMemoryMonitor({\n interval: 1000,\n autoStart: true,\n });\n\n if (!isSupported) {\n returnHeap Used: {formatted.heapUsed}
\nHeap Total: {formatted.heapTotal}
\nHeap Limit: {formatted.heapLimit}
\nSeverity: {severity}
\nUsed: {formatted.heapUsed}
\nTotal: {formatted.heapTotal}
\nSeverity: {severity}
\n\n \nProbability: {leakProbability.toFixed(0)}%
\nCurrent Usage: {formatted.heapUsed}
\n{formatted.heapUsed} / {formatted.heapLimit}
\nCurrent: {formatted.heapUsed}
\n\n \n \n \n\nCurrent: {formatted.heapUsed}
\n\n Trend: {trend === \"increasing\" ? \"↗\" : trend === \"decreasing\" ? \"↘\" : \"→\"} {trend}\n
\nHistory Points: {history.length}
\n\n \n\n {/* Simple bar chart */}\nReason: {info?.reason}
\nBrowser: {info?.browser || \"Unknown\"}
\nAvailable fallbacks: {info?.availableFallbacks.join(\", \")}
\nLevel: {supportLevel}
\nAvailable metrics: {availableMetrics.join(\", \")}
\nHeap Used: {formatted.heapUsed}
\n \n\n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}