{"_id":"@atme-lab/react-diagnostic-tools","_rev":"3-11ae488f8305c0089efed23e5249aeff","name":"@atme-lab/react-diagnostic-tools","dist-tags":{"latest":"0.2.0"},"versions":{"0.0.1":{"name":"@atme-lab/react-diagnostic-tools","version":"0.0.1","keywords":["react","react-hooks","hooks","debug","debugging","performance","profiling","diagnostics","devtools","render","re-render","state","development"],"author":{"name":"Pavel Gordeev","email":"pavelgq@yandex.ru"},"license":"MIT","_id":"@atme-lab/react-diagnostic-tools@0.0.1","maintainers":[{"name":"pavelgq","email":"pavelgq@yandex.ru"}],"homepage":"https://github.com/Pavelgq/react-diagnostic-tools#readme","bugs":{"url":"https://github.com/Pavelgq/react-diagnostic-tools/issues"},"dist":{"shasum":"3ebd7248b3aa511619efd61fcf1438f1683df5d4","tarball":"https://registry.npmjs.org/@atme-lab/react-diagnostic-tools/-/react-diagnostic-tools-0.0.1.tgz","fileCount":73,"integrity":"sha512-+c69FD/knED71Qvj32RoN9DuOz+dIbQSXLd8Rw8LzbtdGRnwP+M3PL8ukxnk73oWVQbCOCy7AIjhTlrQb9G9MQ==","signatures":[{"sig":"MEYCIQCTFC/YIFbb1O1+I1n279MkahJWYtexo/CH2Z/VLntxmgIhAMkJvDdcwDi7mdZ6eDaVpojwDCmydChHl3L5edypEwUl","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":135578},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"cefcfbf07cc3c477c933bd23bc56d1be72766b1d","scripts":{"dev":"rollup -c -w","lint":"biome lint ./src","test":"jest","build":"rollup -c","format":"biome format --write ./src","release":"npm run build && changeset publish","version":"changeset version","lint:fix":"biome lint --write ./src","changeset":"changeset","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"pavelgq","email":"pavelgq@yandex.ru"},"repository":{"url":"git+https://github.com/Pavelgq/react-diagnostic-tools.git","type":"git"},"_npmVersion":"10.9.8","description":"A small collection of React hooks for debugging renders, state, and performance during development","directories":{},"_nodeVersion":"22.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^30.5.0","react":"^19.2.8","tslib":"^2.8.1","rollup":"^4.63.1","ts-jest":"^29.4.12","react-dom":"^19.2.8","typescript":"~6.0.3","@types/jest":"^30.0.0","@types/react":"^19.2.18","@biomejs/biome":"^2.5.11","@changesets/cli":"^3.0.1","@types/react-dom":"^19.2.5","rollup-plugin-dts":"^6.5.1","@testing-library/react":"^16.3.3","jest-environment-jsdom":"^30.5.0","@rollup/plugin-commonjs":"^29.0.3","@rollup/plugin-typescript":"^12.3.0","@testing-library/jest-dom":"^7.0.1","@rollup/plugin-node-resolve":"^16.0.3","@testing-library/user-event":"^14.6.6","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0 <20","react-dom":">=16.8.0 <20"},"_npmOperationalInternal":{"tmp":"tmp/react-diagnostic-tools_0.0.1_1788100952309_0.5467184953251598","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@atme-lab/react-diagnostic-tools","version":"0.1.0","keywords":["react","react-hooks","hooks","debug","debugging","performance","profiling","diagnostics","devtools","render","re-render","state","development"],"author":{"name":"Pavel Gordeev","email":"pavelgq@yandex.ru"},"license":"MIT","_id":"@atme-lab/react-diagnostic-tools@0.1.0","maintainers":[{"name":"pavelgq","email":"pavelgq@yandex.ru"}],"homepage":"https://github.com/Pavelgq/react-diagnostic-tools#readme","bugs":{"url":"https://github.com/Pavelgq/react-diagnostic-tools/issues"},"dist":{"shasum":"8add140dbc0b117293a3a97a4bb6ebd5cc224426","tarball":"https://registry.npmjs.org/@atme-lab/react-diagnostic-tools/-/react-diagnostic-tools-0.1.0.tgz","fileCount":83,"integrity":"sha512-/gl3c8OmRWe4J7wkhs/h3GpLfjtlEGVe/4jhEmwui+7x3FN4AX/Nj/LJQa2NS6teLseBq5wEDD9Hwj6gf4LjyA==","signatures":[{"sig":"MEYCIQC7WoBWjXsXQy2b0oZoTFYk6Qq1cuQJf+RtO5ru4pnIzwIhALisuZIqXktaN7ICEj5I61Sc7NXeE+5uzG7pBiTzMQYT","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":158334},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"cf68d18e79a2b3acfa5a49c185f20574179501ab","scripts":{"dev":"rollup -c -w","lint":"biome lint ./src","test":"jest","build":"rollup -c","format":"biome format --write ./src","release":"npm run build && changeset publish","version":"changeset version","lint:fix":"biome lint --write ./src","changeset":"changeset","test:watch":"jest --watch","type-check":"tsc --noEmit","test:coverage":"jest --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"pavelgq","email":"pavelgq@yandex.ru"},"repository":{"url":"git+https://github.com/Pavelgq/react-diagnostic-tools.git","type":"git"},"_npmVersion":"10.9.8","description":"A small collection of React hooks for debugging renders, state, and performance during development","directories":{},"_nodeVersion":"22.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^30.5.0","react":"^19.2.8","tslib":"^2.8.1","rollup":"^4.63.1","ts-jest":"^29.4.12","react-dom":"^19.2.8","typescript":"~6.0.3","@types/jest":"^30.0.0","@types/react":"^19.2.18","@biomejs/biome":"^2.5.11","@changesets/cli":"^3.0.1","@types/react-dom":"^19.2.5","rollup-plugin-dts":"^6.5.1","@testing-library/react":"^16.3.3","jest-environment-jsdom":"^30.5.0","@rollup/plugin-commonjs":"^29.0.3","@rollup/plugin-typescript":"^12.3.0","@testing-library/jest-dom":"^7.0.1","@rollup/plugin-node-resolve":"^16.0.3","@testing-library/user-event":"^14.6.6","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0 <20","react-dom":">=16.8.0 <20"},"_npmOperationalInternal":{"tmp":"tmp/react-diagnostic-tools_0.1.0_1788105227279_0.3198465146756473","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@atme-lab/react-diagnostic-tools","version":"0.2.0","type":"module","description":"A small collection of React hooks for debugging renders, state, and performance during development","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","lint":"biome lint ./src","lint:fix":"biome lint --write ./src","format":"biome format --write ./src","type-check":"tsc --noEmit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","changeset":"changeset","version":"changeset version","release":"npm run build && changeset publish","prepublishOnly":"npm run build"},"keywords":["react","react-hooks","hooks","debug","debugging","performance","profiling","diagnostics","devtools","render","re-render","state","development"],"author":{"name":"Pavel Gordeev","email":"pavelgq@yandex.ru"},"license":"MIT","publishConfig":{"access":"public"},"peerDependencies":{"react":">=16.8.0 <20","react-dom":">=16.8.0 <20"},"devDependencies":{"@biomejs/biome":"^2.5.11","@changesets/cli":"^3.0.1","@rollup/plugin-commonjs":"^29.0.3","@rollup/plugin-node-resolve":"^16.0.3","@rollup/plugin-typescript":"^12.3.0","@testing-library/jest-dom":"^7.0.1","@testing-library/react":"^16.3.3","@testing-library/user-event":"^14.6.6","@types/jest":"^30.0.0","@types/react":"^19.2.18","@types/react-dom":"^19.2.5","jest":"^30.5.0","jest-environment-jsdom":"^30.5.0","react":"^19.2.8","react-dom":"^19.2.8","rollup":"^4.63.1","rollup-plugin-dts":"^6.5.1","rollup-plugin-peer-deps-external":"^2.2.4","ts-jest":"^29.4.12","tslib":"^2.8.1","typescript":"~6.0.3"},"repository":{"type":"git","url":"git+https://github.com/Pavelgq/react-diagnostic-tools.git"},"bugs":{"url":"https://github.com/Pavelgq/react-diagnostic-tools/issues"},"homepage":"https://github.com/Pavelgq/react-diagnostic-tools#readme","_id":"@atme-lab/react-diagnostic-tools@0.2.0","gitHead":"1cf6931a83a99ab613951718550e5c8a3c533380","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-8IPXs4mgRGpDdMw5lU/5JNWMP77oedhJt2yE25Zdy+fRHq5lyqsoDl4ohG59HFCpi+V0A7F8dT/BWLO2fKZPpQ==","shasum":"5a4ccb549c7e4816c5a0672f168e7f8cbc48e246","tarball":"https://registry.npmjs.org/@atme-lab/react-diagnostic-tools/-/react-diagnostic-tools-0.2.0.tgz","fileCount":89,"unpackedSize":174634,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEWJRKH25AtAqeeTXBBrGOVaMcj9n+HParMXEiWAErFVAiA191tZlEB6dBmtUOZhtWW7kPlvkqXlumEzg88YpJSV/w=="}]},"_npmUser":{"name":"pavelgq","email":"pavelgq@yandex.ru"},"directories":{},"maintainers":[{"name":"pavelgq","email":"pavelgq@yandex.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-diagnostic-tools_0.2.0_1788284485828_0.9412214259293086"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-30T14:42:32.146Z","modified":"2026-09-01T17:41:26.218Z","0.0.1":"2026-08-30T14:42:32.480Z","0.1.0":"2026-08-30T15:53:47.418Z","0.2.0":"2026-09-01T17:41:25.984Z"},"bugs":{"url":"https://github.com/Pavelgq/react-diagnostic-tools/issues"},"author":{"name":"Pavel Gordeev","email":"pavelgq@yandex.ru"},"license":"MIT","homepage":"https://github.com/Pavelgq/react-diagnostic-tools#readme","keywords":["react","react-hooks","hooks","debug","debugging","performance","profiling","diagnostics","devtools","render","re-render","state","development"],"repository":{"type":"git","url":"git+https://github.com/Pavelgq/react-diagnostic-tools.git"},"description":"A small collection of React hooks for debugging renders, state, and performance during development","maintainers":[{"name":"pavelgq","email":"pavelgq@yandex.ru"}],"readme":"# React Diagnostic Tools\n\n[![CI](https://github.com/Pavelgq/react-diagnostic-tools/actions/workflows/ci.yml/badge.svg)](https://github.com/Pavelgq/react-diagnostic-tools/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/%40atmelab%2Freact-diagnostic-tools)](https://www.npmjs.com/package/@atme-lab/react-diagnostic-tools)\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\nA small collection of React hooks for debugging renders, state, and\nperformance during development.\n\n📖 **[Docs and live demos](https://pavelgq.github.io/react-diagnostic-tools/)**\n\n## Install\n\n```bash\nnpm install @atme-lab/react-diagnostic-tools\n```\n\nInstall it as a regular dependency, not `devDependencies`. The dependency\ntype has no effect on what ends up in your production bundle - bundlers\nresolve modules by whether they exist in `node_modules`, not by which\n`package.json` section listed them. If your hooks run inside a `'use client'`\ncomponent in a framework like Next.js, the server process actually\n`require()`s the package during the initial SSR render - and a lean-runtime\nDocker stage that does `npm ci --omit=dev` before starting the server would\ncrash on that `require()` if it were a devDependency. The actual production\nsafety net is the `NODE_ENV` check described below, not where the package\nlives in `package.json`.\n\n## Quick start\n\n```tsx\nimport { useWhyRender } from '@atme-lab/react-diagnostic-tools';\n\nfunction MyComponent(props: { name: string; age: number }) {\n  useWhyRender(props, 'MyComponent');\n  // ...\n}\n```\n\nEvery hook logs to the console, but **only when `process.env.NODE_ENV` isn't\n`\"production\"`** - all output is off by default in a production build,\nregardless of how the package ended up in your bundle. This relies on your\nbundler statically replacing `process.env.NODE_ENV` (Next.js, Create React\nApp, Vite-with-the-React-plugin, and most other React toolchains already do\nthis). To override the default, swap the logger, or throttle noisy logs,\ncall `configureDebugTools` once at your app's entry point:\n\n```tsx\nimport { configureDebugTools } from '@atme-lab/react-diagnostic-tools';\n\nconfigureDebugTools({\n  enabled: true, // e.g. force it on even in a production build, for a staging environment\n  throttleMs: 200,\n  // logger: myCustomLogger, // any object matching the `Logger` interface\n});\n```\n\n## Hooks\n\nEach hook has its own README with a full API reference and examples -\nfollow the links below.\n\n### Render debugging\n\n| Hook | Description |\n| --- | --- |\n| [`useWhyRender`](src/hooks/render-debugging/useWhyRender/README.md) | Logs which props changed and caused a re-render |\n| [`useRenderCount`](src/hooks/render-debugging/useRenderCount/README.md) | Counts every render, regardless of cause |\n| [`useTraceRender`](src/hooks/render-debugging/useTraceRender/README.md) | Logs the full props on every render, changed or not |\n| [`useTrackedEffect`](src/hooks/render-debugging/useTrackedEffect/README.md) | Wraps `useEffect` and reports which dependency changed |\n\n### Refs\n\n| Hook | Description |\n| --- | --- |\n| [`usePrevious`](src/hooks/refs/usePrevious/README.md) | Returns the value from the previous render |\n| [`useTrackedValue`](src/hooks/refs/useTrackedValue/README.md) | Labels a value in DevTools and logs it on change |\n\n### Performance\n\n| Hook | Description |\n| --- | --- |\n| [`useMemoPerformance`](src/hooks/performance/useMemoPerformance/README.md) | Analyzes whether a `useMemo` is actually worth it |\n| [`useExecutionTime`](src/hooks/performance/useExecutionTime/README.md) | Measures a function's execution time, with a `warnIfAbove` threshold |\n| [`useMeasuredCallback`](src/hooks/performance/useMeasuredCallback/README.md) | A drop-in `useCallback` that logs how long it takes every time it's called |\n\n### State\n\n| Hook | Description |\n| --- | --- |\n| [`useStateLogger`](src/hooks/state/useStateLogger/README.md) | A drop-in `useState` that logs every change |\n\n## Utilities\n\nNot a hook - works anywhere, not just inside a component.\n\n| Utility | Description |\n| --- | --- |\n| [`withExecutionTiming`](src/utils/withExecutionTiming/README.md) | Wraps any function so every call is timed and logged |\n\n## Global configuration\n\n```tsx\nfunction configureDebugTools(options: {\n  enabled?: boolean;\n  logger?: Logger;\n  throttleMs?: number;\n}): void;\n```\n\n- `enabled` - master switch for all console output from every hook (default: `false` when a bundler-injected `process.env.NODE_ENV` reads `\"production\"`, `true` otherwise)\n- `logger` - swap the default `console`-based logger for your own implementation of the `Logger` interface (`log`, `warn`, `group`, `groupEnd`)\n- `throttleMs` - minimum time between log emissions for hot-path hooks like `useMemoPerformance` and `useExecutionTime` (default: `0`, no throttling)\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build\nnpm run build\n\n# Lint\nnpm run lint\n\n# Format\nnpm run format\n\n# Type-check\nnpm run type-check\n\n# Test (with coverage)\nnpm run test:coverage\n```\n\n## Releasing\n\nThis project uses [Changesets](https://github.com/changesets/changesets) to\nmanage versioning and the changelog. After making a change that should ship\nin the next release:\n\n```bash\nnpm run changeset\n```\n\nThis walks you through describing the change and writes a small file under\n`.changeset/`. Commit it alongside your change. When it's time to cut a\nrelease, `npm run version` consumes the pending changesets to bump the\npackage version and update `CHANGELOG.md`, and `npm run release` builds and\npublishes to npm.\n\n## Roadmap\n\nThe hooks above are the first batch - simple, self-contained, and covering\nthe most common debugging needs. A larger backlog of ideas exists for\nfollow-up releases, mostly heavier tools involving DOM overlays, global\npanels, or deep-equal comparisons:\n\n- `useDeepComparison` - a deep-equal version of prop/dependency change detection\n- `useContextChanges` - subscribes to a context and logs every value change\n- `useRenderHighlight` - highlights a component on screen when it re-renders\n- `useScrollIntoView` - scrolls a component into view under a dev-mode condition\n- `useRefLogger` - logs a ref's current value (e.g. a DOM node) whenever it changes\n- `useStateWatcher` - runs a callback when state reaches a specific value or condition\n- `useDevToggles` - an on-screen panel of toggles/selectors for simulating app state\n- `useFpsMonitor` - shows the app's current frames-per-second\n- `useNetworkActivity` - tracks in-flight HTTP requests to spot leaks or excessive polling\n- `useVisualNesting` - highlights a component's DOM nesting depth\n- `useComponentTiming` / `useProfiler` - a manual `start()`/`stop()` timer for arbitrary code\n\n## Contributing\n\nContributions are welcome - see [CONTRIBUTING.md](CONTRIBUTING.md) for dev\nsetup, the PR process, and how to add a new hook. This project follows the\n[Contributor Covenant](CODE_OF_CONDUCT.md). Found a security issue? See\n[SECURITY.md](SECURITY.md).\n\n## License\n\nMIT\n","readmeFilename":"README.md"}