tracing-recompositions-at-runtime

Instrument Jetpack Compose composables to trace and log recompositions in real time.

8|Updated May 18, 2025
One-click install
npx skills add https://github.com/decoutkhanqindev/DexReader --skill tracing-recompositions-at-runtime-decoutkhanqindev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tracing-recompositions-at-runtime
Source: https://github.com/decoutkhanqindev/DexReader/tree/main/.claude/skills/tracing-recompositions-at-runtime
Command: npx skills add https://github.com/decoutkhanqindev/DexReader --skill tracing-recompositions-at-runtime-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 allows developers to track and visualize recompositions in Jetpack Compose applications, helping to identify and fix performance issues caused by unnecessary recompositions.

Core Features & Use Cases

  • Recomposition Tracing: Instrument Jetpack Compose composables to trace and log recompositions.
  • Logcat Visualization: View recomposition details in logcat for debugging.
  • Heatmap in Android Studio: Provides a live recomposition heatmap in Android Studio for visual analysis.
  • Integration with CI: Works seamlessly with CI pipelines for automated stability checks.
  • Use Case: Identify a performance issue in a release build by analyzing the recomposition heatmap and logcat output.

Quick Start

Enable tracing for the composable 'MyComposable' and observe recompositions in logcat under the 'Recomposition' tag.

Frequently Asked Questions about tracing-recompositions-at-runtime

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

FAQPage Schema
How do I track unnecessary Jetpack Compose recompositions?

You can track unnecessary Jetpack Compose recompositions by instrumenting composables to generate detailed logs and visual heatmaps, identifying performance issues during production debugging or CI stability checks.

How does a recomposition heatmap work in Android Studio?

A recomposition heatmap in Android Studio provides live visual analysis by instrumenting composables, displaying color-coded overlays that highlight frequently recomposing UI components for targeted performance debugging.

Can I use recomposition tracing for automated CI stability checks?

Yes, recomposition tracing works seamlessly with CI pipelines to perform automated stability checks, validating that Jetpack Compose composables do not trigger unnecessary recompositions across builds.

Do I need the compose-stability-analyzer to trace Jetpack Compose recompositions?

Yes, using the skydoves/compose-stability-analyzer is required, alongside existing familiarity with Jetpack Compose and Android development tools, to properly instrument and visualize composable recompositions.

What's the best way to view Jetpack Compose recomposition details in logcat?

The best way to view Jetpack Compose recomposition details in logcat is to enable tracing on target composables and filter logs under the 'Recomposition' tag to diagnose performance issues.

Why does my Jetpack Compose UI recompose excessively in release builds?

Excessive Jetpack Compose recompositions in release builds stem from unstable parameters triggering unnecessary updates, which you can diagnose by analyzing the live heatmap and logcat output.