render-intelligencestable

Post-hoc analysis engine for React render telemetry — ranks performance bottlenecks, traces root causes, detects cross-component correlations, and generates 15 deterministic recommendations. Framework-agnostic, zero runtime dependencies.

Install: pnpm add @sapanmozammel/render-intelligence

⚠ issues detected

Feed a multi-component event stream into analyzeRenders() and inspect the ranked bottleneck list. Each entry shows the dominant problem category, impact score, and evidence backing the finding.

Application Health — Score 52 (MODERATE)1 healthy · 2 degraded · 0 critical

#1 — ExpensiveListimpact 100ineffective-memo

React.memo is fully defeated — all reference-unstable props cause unnecessary re-renders (impact: 100)

#2 — DataPanelimpact 22.5score-degradation

Health score declining over session — average 64, worst 55 (impact: 23)

#3 — Headerimpact 3.8no-change-renders

0 renders with no observable prop changes (impact: 4)

▸How to use render-intelligence

import { analyzeRenders } from '@sapanmozammel/render-intelligence';

// Feed any telemetry source into the analysis engine
const report = analyzeRenders({
  type: 'events',      // or 'snapshot' | 'replay'
  events: telemetryEvents,
});

// or: { type: 'snapshot', snapshot: telemetryBuffer.snapshot() }
// or: { type: 'replay', sessions: replaySessions }

// Application-level health
report.applicationHealth.score;       // 0-100
report.applicationHealth.grade;       // EXCELLENT | GOOD | MODERATE | POOR | CRITICAL
report.applicationHealth.criticalCount; // components below score 30

// Ranked bottlenecks (worst first)
report.bottlenecks[0].componentName;  // "ExpensiveList"
report.bottlenecks[0].category;       // "ineffective-memo"
report.bottlenecks[0].impactScore;    // 0-100

// Root cause causal chains
report.rootCauses[0].kind;            // "memo-defeat"
report.rootCauses[0].causalChain;     // step-by-step explanation
report.rootCauses[0].affectedComponents; // downstream components

// Deterministic recommendations
report.recommendations[0].id;        // "R-INTEL-MEMO-001"
report.recommendations[0].severity;  // "CRITICAL"
report.recommendations[0].fix;       // actionable string

// Options
analyzeRenders(source, {
  maxBottlenecks: 10,
  maxRecommendations: 20,
  confidenceThreshold: 0.3,
  correlationWindowMs: 16,
  includeWellOptimized: false,
  plugins: [myCustomPlugin],
});

Pure TypeScript, zero runtime dependencies. Works in Node.js, browsers, and edge runtimes. Accepts live telemetry events, buffered snapshots, or replay sessions interchangeably.