react-debug-updates 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,9 +4,11 @@ Visual debugging overlays and console logging for React re-renders. See exactly
|
|
|
4
4
|
|
|
5
5
|
 
|
|
6
6
|
|
|
7
|
+
<img src="demo.gif" alt="demo" width="852" height="476" />
|
|
8
|
+
|
|
7
9
|
## How it works
|
|
8
10
|
|
|
9
|
-
Hooks into `__REACT_DEVTOOLS_GLOBAL_HOOK__` to intercept every React commit. No wrappers, no HOCs, no code changes — just call `attachRenderLogger()` and you get:
|
|
11
|
+
Hooks into `__REACT_DEVTOOLS_GLOBAL_HOOK__` to intercept every React commit. Works in any React web environment — browsers, Electron, iframes — no React DevTools extension required. No wrappers, no HOCs, no code changes — just call `attachRenderLogger()` and you get:
|
|
10
12
|
|
|
11
13
|
- **Console logging** — grouped, color-coded re-render reports with component tree paths and render durations
|
|
12
14
|
- **Visual overlays** — highlight boxes on re-rendered DOM nodes with a heat-map color scale (blue → red as render count increases)
|
|
@@ -24,10 +26,12 @@ pnpm add react-debug-updates
|
|
|
24
26
|
|
|
25
27
|
## Quick start
|
|
26
28
|
|
|
29
|
+
Import and call `attachRenderLogger` **before** React renders anything — ideally at the very top of your entry point. This ensures the hook is in place before the first commit.
|
|
30
|
+
|
|
27
31
|
```ts
|
|
28
32
|
import { attachRenderLogger } from "react-debug-updates";
|
|
29
33
|
|
|
30
|
-
// Call
|
|
34
|
+
// Call before React renders — top of your entry point
|
|
31
35
|
const logger = attachRenderLogger({
|
|
32
36
|
highlight: true,
|
|
33
37
|
showCauses: true,
|
|
@@ -48,7 +52,7 @@ if (process.env.NODE_ENV === "development") {
|
|
|
48
52
|
|
|
49
53
|
## Requirements
|
|
50
54
|
|
|
51
|
-
-
|
|
55
|
+
- A **React dev build** (which automatically creates `__REACT_DEVTOOLS_GLOBAL_HOOK__`) — no browser extension needed
|
|
52
56
|
- For `showCauses` and render durations: React must be in **dev mode** (provides `_debugHookTypes` and `actualDuration` on fibers)
|
|
53
57
|
|
|
54
58
|
## API
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-debug-updates",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "See why React components re-render — visual overlays, console logging, and hook-level cause detection with zero code changes",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/react-debug-updates.cjs",
|