Render-Xray

import { useRenderXray } from "@hookraft/render-xray"

const { renderCount, stableRenderCount, history, clearHistory } = useRenderXray(
  "MyComponent",
  props,
  { count, open },
  { onlyAvoidable: true, track: true, onRender: (record) => console.log(record) }
)

Parent re-renders
  │
  ├── Child A — prop "user" changed: same value, new reference → useMemo
  ├── Child B — prop "onClick" changed: new function → useCallback
  └── Child C — no changes at all → render source inferred as parent

import { useRenderXray } from "@hookraft/render-xray"

function UserCard(props: { user: User; onClick: () => void }) {
  useRenderXray("UserCard", props as Record<string, unknown>)

  return <div onClick={props.onClick}>{props.user.name}</div>
}

function SearchBox(props: { placeholder: string }) {
  const [query, setQuery] = useState("")
  const [focused, setFocused] = useState(false)

  useRenderXray("SearchBox", props as Record<string, unknown>, { query, focused })

  return (
    <input
      placeholder={props.placeholder}
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
    />
  )
}

useRenderXray("HeavyChart", props as Record<string, unknown>, {}, {
  onlyAvoidable: true,
})

useRenderXray("MyComponent", props as Record<string, unknown>, {}, {
  filter: {
    includeProps:          true,
    includeState:          true,
    includeFunctions:      false,  // hide function-reference noise
    includeParentTriggers: false,  // hide parent-triggered renders
  },
})

function Dashboard(props: DashboardProps) {
  const { history, clearHistory } = useRenderXray(
    "Dashboard",
    props as Record<string, unknown>,
    {},
    { track: true }
  )

  return (
    <>
      <DashboardUI {...props} />
      {process.env.NODE_ENV === "development" && (
        <RenderHistory records={history} onClear={clearHistory} />
      )}
    </>
  )
}

useRenderXray("MyComponent", props as Record<string, unknown>, {}, {
  log: false,
  onRender: (record) => {
    if (record.hasAvoidableChanges) {
      myAnalytics.track("avoidable_rerender", {
        component: record.component,
        trigger: record.trigger,
        changes: record.changes.map((c) => c.key),
      })
    }
  },
})

▶ [render-xray] UserCard re-rendered (props changed)
    render #4
    🟢 render duration: 2.1ms
    🟡 [prop] user ← same value, new reference
        fix: wrap in useMemo()
        changed keys:
          (none — content is identical)
    ⚠ 1 avoidable prop/value recreation detected during this render.
      See flagged changes above for useMemo / useCallback opportunities.

▶ [render-xray] UserCard re-rendered (props changed)
    render #5
    🟢 render duration: 1.8ms
    🟡 [prop] onClick ← new function on every render
        fix: wrap in useCallback()

▶ [render-xray] UserCard re-rendered (render source inferred: parent)
    render #6
    🟢 render duration: 1.2ms
    → No local changes detected — render source inferred as parent.
      Tip: this component may benefit from memoization (React.memo / equivalent).

▶ [render-xray] SearchBox re-rendered (state changed)
    render #3
    🟢 render duration: 3.4ms
    🟢 [state] query ← changed
        prev: "re"
        next: "rea"

▶ [render-xray] HeavyChart re-rendered (props changed)
    render #9
    🔴 render duration: 24.6ms
    🔴 [prop] data ← same value, new reference
        fix: wrap in useMemo()
    ⚠ 1 avoidable prop/value recreation detected during this render.

▶ [render-xray] MyComponent React StrictMode replay (dev only)
    This is a development-only double-invoke. Ignore for production analysis.

if (process.env.NODE_ENV === "development") {
  useRenderXray("MyComponent", props as Record<string, unknown>)
}

// lib/renderXray.ts
type Hook = typeof import("@hookraft/render-xray").useRenderXray

const noop: ReturnType<Hook> = {
  renderCount: 0,
  stableRenderCount: 0,
  history: [],
  clearHistory: () => {},
}

export const useRenderXray: Hook =
  process.env.NODE_ENV === "development"
    ? require("@hookraft/render-xray").useRenderXray
    : () => noop

import { useRenderXray } from "@hookraft/render-xray"

// Options
const options: useRenderXray.Options = { onlyAvoidable: true }

// Filter options
const filter: useRenderXray.FilterOptions = { includeFunctions: false }

// A single render record
const record: useRenderXray.Record = { ... }

// A single change within a record
const change: useRenderXray.Change = { ... }

// The trigger type
const trigger: useRenderXray.Trigger = "parent"

// The reason a value changed
const reason: useRenderXray.ChangeReason = "same-value-new-reference"

// The severity of a change
const severity: useRenderXray.Severity = "avoidable"