Tracks UI recompositions in real-time, providing visual feedback and live counts to help optimize UI performance and identify bottlenecks with production-safe debugging features.
A simple tool to track UI recompositions in real-time for Compose Multiplatform. This project allows you to visualize and measure how often your components are recomposed, helping you optimize your UI and understand performance bottlenecks.
Inspired by React Scanner, this tool shows which composables are being recomposed and how often, with a live count and visual feedback.
trackRecompositionsIf() to leave tracking in your codebase safely — no need to manually add or remove modifiers.RecompositionTrackerTheme object.https://github.com/user-attachments/assets/da45964c-47ca-41ea-aa03-61b189b1576f
Add the dependency to your app's build.gradle.kts:
dependencies {
implementation("io.github.qamarelsafadi:compose-tracker:3.0.0")
}
Add the dependency to your app's build.gradle.kts:
dependencies {
implementation("io.github.qamarelsafadi:compose-tracker:3.0.0")
}
Use trackRecompositions() to track recompositions on any Composable:
@Composable
fun MyComposable() {
Text(
text = "Hello World",
modifier = Modifier.trackRecompositions()
)
}
Use trackRecompositionsIf() for conditional tracking that's safe to leave in production:
@Composable
fun MyComposable() {
Text(
text = "Hello World",
modifier = Modifier
.trackRecompositionsIf(BuildConfig.DEBUG) // Only in debug builds
.padding(16.dp)
)
}
Available options:
// Always disabled (default)
Modifier.trackRecompositionsIf()
// Always enabled
Modifier.trackRecompositionsIf(enabled = true)
// Only in debug builds
Modifier.trackRecompositionsIf(enabled = BuildConfig.DEBUG)
// Custom condition
Modifier.trackRecompositionsIf(enabled = isDebugging)
You can customize its appearance through the global RecompositionTrackerTheme object.
You can override the default appearance by modifying the global RecompositionTrackerTheme. This includes options for border style, text style, and contentPadding.
data object RecompositionTrackerTheme {
var enabled: Boolean
var border: Border
var textStyle: RecompositionTextStyle
var contentPadding: PaddingValues
}
You typically want to configure RecompositionTrackerTheme once in your app (e.g., at the root of your UI or in an Application class), then apply trackRecompositionsIf() wherever needed. This ensures consistent styling across your entire app.
This tool uses the Modifier.trackRecompositions() to track recompositions. When a recomposition occurs, the component will display a red border, and the recomposition count will update.
The library provides two main functions:
trackRecompositions(): Always tracks recompositionstrackRecompositionsIf(enabled: Boolean): Conditionally tracks recompositions based on the enabled parameterIf you'd like to contribute to this project, feel free to open issues, submit pull requests, or suggest new features. Here's how you can contribute:
Copyright 2024 Qamar Safadi
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance the License.
You may obtain a copy of the License at
http:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
Surfaced from shared tags and platforms — no rankings paid for.