visualizing-recomposition-cascades

Analyze static call graphs and visualize live recomposition events for Jetpack Compose.

8|Updated May 18, 2025
One-click install
npx skills add https://github.com/decoutkhanqindev/DexReader --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/DexReader/tree/main/.claude/skills/visualizing-recomposition-cascades
Command: npx skills add https://github.com/decoutkhanqindev/DexReader --skill visualizing-recomposition-cascades-decoutkhanqindev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires skydoves/compose-stability-analyzer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a way to visualize recomposition cascades and heatmaps for Jetpack Compose applications, helping developers understand the performance implications of changes to their UI.

Core Features & Use Cases

  • Static Recomposition Cascade Visualizer: Analyze the static call graph from a root @Composable to understand what might recompose.
  • Live Recomposition Heatmap: Stream D/Recomposition events from a device's logcat to see actual recomposition counts.
  • Use Case: When a developer wants to understand the impact of a UI change on recomposition and performance.

Quick Start

To visualize the recomposition cascade, place the caret inside a @Composable and run the "Analyze Recomposition Cascade" action.

Frequently Asked Questions about visualizing-recomposition-cascades

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

FAQPage Schema
How do I visualize Jetpack Compose recomposition cascades?

To visualize Jetpack Compose recomposition cascades, place the caret inside a @Composable function and run the Analyze Recomposition Cascade action to analyze the static call graph and identify potential performance impacts.

Can I track live recomposition heatmaps for Compose apps via logcat?

Yes, you can track live recomposition heatmaps by streaming D/Recomposition events from a connected Android device's or emulator's logcat to see actual recomposition counts during runtime.

Do I need IntelliJ IDEA and the compose-stability-analyzer plugin to analyze recomposition?

Yes, analyzing recomposition cascades requires IntelliJ IDEA with the skydoves/compose-stability-analyzer plugin installed, alongside a connected Android device or emulator for live event streaming.

What is a static recomposition cascade visualizer in Jetpack Compose?

A static recomposition cascade visualizer analyzes the call graph from a root @Composable to predict what might recompose, helping developers understand the performance implications of UI changes before runtime.

Why does my Jetpack Compose UI recompose excessively and how do I find the source?

Excessive Jetpack Compose recomposition can be identified by streaming live D/Recomposition events from logcat to generate a heatmap, revealing actual recomposition counts and pinpointing problematic UI components.

What's the best way to understand the performance impact of Compose UI changes?

The best way to understand the performance impact of Compose UI changes is to analyze static call graphs for potential recomposition cascades and stream live recomposition events from logcat to generate heatmaps.