android-compose-realtime

Jetpack Compose UI jank occurs when high-frequency telemetry streams trigger expensive recompositions by reading state directly inside composables. Splitting StateFlow into per-metric streams and applying distinctUntilChanged prevents unnecessary recomposition at sensor update rates.

Optimize a 25Hz Compose dashboard by splitting telemetry StateFlows per metric, filtering with distinctUntilChanged, and rendering gauges with Canvas. Use derivedStateOf for computed values and collectAsStateWithLifecycle for lifecycle-safe flow collection.

Use derivedStateOf in a real-time Compose UI to recompute and re-render only when the derived result changes, not on every upstream StateFlow update. This prevents excessive recomposition when handling high-frequency telemetry data streams.

collectAsStateWithLifecycle prevents leaks and unwanted updates in Compose telemetry dashboards by safely wiring StateFlow collection to the lifecycle. It stops high-frequency state emissions from triggering recomposition when the composable is not in an active lifecycle state.

The best way to render live sliding-window graphs in Jetpack Compose is using Canvas so drawing work stays in the draw phase with minimal composition churn. Pair Canvas with @Immutable data classes and derivedStateOf to maintain stable rendering at 25Hz+.

Apply @Immutable and @Stable annotations to data classes and state containers to reduce conservative recomposition behavior in Compose. These stable data patterns help the compiler skip unnecessary recompositions when handling high-frequency telemetry updates.