Drawing without pain and recomposition
summary
Shows concrete fixes that cut needless recompositions and allocations by moving reads out of composition into layout or drawing phases, with working examples: replacing alpha tied to state with graphicsLayer modifier eliminates per-frame recompositions, swapping animateDp-backed height for a layout-based read or a custom height-state modifier removes animation churn, and drawing backgrounds via drawBehind/drawWithCache avoids composition. Memory wins include replacing per-frame brush creation that caused 1363 linear gradients with canvas.translate caching, and avoiding boxing that produced 79k offsets by using the native canvas float-array path.
AI-written summary · about
chapters (14)
- 0:00Jetpack Compose optimizations
- 3:55Jetpack Compose phases
- 6:00Recomposition triggers and best practices
- 8:32State reads in phases
- 11:21Defer state reads to reduce recomposition
- 13:30Height animations in Compose
- 16:49Reduce recomposition on background changes
- 19:45Phase changes for performance
- 21:55Lottie animations in Compose
- 24:30When optimization is unnecessary
- 25:14Memory optimization with shimmer
- 28:47Particle system animation challenges
- 31:42Reduce memory allocations in canvas
- 35:16Summary
related talks
36mJetpack Compose: Drawing without pain and recomposition
39mJetpack Compose: Drawing without pain and recomposition
37mPerformance in Compose:Lessons learned from Lazy layouts
33mSaving the Web 16 Milliseconds at a Time
40mAndroid Graphics Performance
41mLoving Lean Layouts
36mDrawn out: How Android renders
28mOptimizing and Profiling UI Performance