visualizing-recomposition-cascades

Visualize static recomposition cascades and live logcat-driven heatmaps for Jetpack Compose composables.

Updated May 31, 2026
One-click install
npx skills add https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat --skill visualizing-recomposition-cascades-decoutkhanqindev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visualizing-recomposition-cascades
Source: https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat/tree/main/.claude/skills/visualizing-recomposition-cascades
Command: npx skills add https://github.com/decoutkhanqindev/Lich-Viet-Loc-Phat --skill visualizing-recomposition-cascades-decoutkhanqindev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When a Jetpack Compose screen recomposes too often, developers struggle to answer two questions: which composables get dragged in when a root composable changes, and how many times each composable actually recomposed during a real interaction. This Skill drives the active investigation features of the skydoves/compose-stability-analyzer IntelliJ plugin to answer both. ## Core Features & Use Cases - Cascade Visualizer: Right-click inside any @Composable and run Analyze Recomposition Cascade to render a static call-graph tree (depth-capped at 10, cycle-safe) showing the blast radius of a state change, with per-node stability badges. - Live Recomposition Heatmap: Toggle Recomposition Heatmap to subscribe to adb logcat -s Recomposition:D -T 1 and render color-coded block inlays above each @TraceRecomposition-instrumented composable showing live recomposition counts. - Tool Window Tabs: Use the Explorer tab to survey a module, the Cascade tab for static analysis, and the Heatmap tab for runtime confirmation, with Clear Recomposition Data to reset counters between scenarios. - Use Case: Before refactoring a shared composable, run the cascade to see 12 downstream nodes, instrument the top suspects with @TraceRecomposition, toggle the heatmap during a scroll, and discover only 2 nodes are actually hot—fixing those instead of all 12. ## Quick Start Right-click inside a @Composable function in Android Studio and choose Analyze Recomposition Cascade to see its recomposition blast radius in the Compose Stability Analyzer tool window.

Frequently Asked Questions about visualizing-recomposition-cascades

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I see what recomposes when a Jetpack Compose composable changes?▼

Place the caret inside the @Composable, right-click, and choose Analyze Recomposition Cascade. The Compose Stability Analyzer tool window opens a tree of downstream composables with stability badges, capped at depth 10 with cycle detection.

How do I count recompositions in Android Studio in real time?▼

Annotate target composables with @TraceRecomposition, run the app on a connected device, then right-click and choose Toggle Recomposition Heatmap. Block inlays appear above each instrumented composable showing live recomposition counts streamed from logcat.

Why is the recomposition heatmap showing no inlays?▼

The heatmap is fed by D/Recomposition logcat lines emitted by the @TraceRecomposition runtime. Without at least one instrumented composable and ComposeStabilityAnalyzer.setEnabled(true) in a debug build, no inlays render.

Does the recomposition cascade guarantee runtime behavior?▼

No. The cascade is a static call-graph walk showing potential blast radius; whether nodes actually recompose depends on stability and skipping at runtime. Confirm with the live heatmap before refactoring.

Can I run Macrobenchmark while the recomposition heatmap is on?▼

No. The heatmap drives logcat I/O and PSI updates on every recomposition, which skews FrameTimingMetric results. Toggle the heatmap off before running Macrobenchmark or Baseline Profile generation.