Boosting Compose UI from Sluggish to Snappy
summary
A Tinder-clone card stack shows UI frames exceeding 300 ms against the 16 ms target; GPU rendering bars and Android Studio profilers plus the composition tracing library locate a hot swipeable card composable. Layout Inspector reveals thousands of offscreen cards; fixing a measure/place bug, switching to derivedStateOf, using lambda-based modifiers and deferring state reads, and replacing a List with a persistent immutable list cuts unnecessary recompositions and yields buttery card swipes. Compiler metrics are the final fallback when recomposition sources remain unclear.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:48Diagnosing UI jank
- 3:53Profiling with Android Studio
- 7:24Composition tracing library
- 10:12Fixing layout issues
- 13:50Understanding Compose phases
- 15:15Recomposition basics
- 18:00Reducing recompositions
- 22:16Lambda modifiers
- 26:11Deferring state reads
- 30:24Fixing page navigation jank
- 31:48Compose compiler metrics
- 37:07Stabilizing parameters
- 38:51Final performance check
- 39:54Key takeaways
- 41:59Closing thoughts
related talks
45mBoosting Compose UI from Sluggish to Snappy
40mBoosting Compose UI from Sluggish to Snappy
37mPerformance in Compose:Lessons learned from Lazy layouts
21mPerformance best practices for Jetpack Compose
55mOptimising UI in Jetpack Compose
54mOptimizing Render Performance of Jetpack Compose
21mMore performance tips for Jetpack Compose
32mFrom Debugging to Real-World Tuning: A Practical Guide to Compose Performance