Jetpack Compose: Drawing without pain and recomposition
summary
Shows concrete fixes that cut recomposition and allocations: replace state-read modifiers (alpha, offset, background) with versions that read state in layout or draw so composition skips during animations; use graphicsLayer for animating layer properties and drawWithCache + canvas.translate to cache brushes and avoid thousands of gradient / object allocations (example: 1,363 gradient creations before fix). Demonstrates Lottie moving progress to a lambda to stop per-frame recompositions and a native-canvas fallback to eliminate 79,000 boxed Offset allocations in a particle system.
AI-written summary · about
chapters (13)
- 0:00Jetpack Compose drawing intro
- 2:56Compose phases explained
- 5:27Recomposition triggers & optimizations
- 10:29Defer state reads
- 13:09Optimize height & animations
- 16:39Background color animation
- 19:28Phase-based optimizations
- 21:40Library recomposition handling
- 24:12When to optimize recomposition
- 24:58Memory optimization in drawing
- 29:02Particle system challenges
- 34:24Native canvas access
- 35:09Summary & Q&A
related talks
39mJetpack Compose: Drawing without pain and recomposition
36mDrawing without pain and recomposition
38mJetPack Compose Performance Tips & Tricks
36mPractical implementations of powerful UI expressions using Jetpack Compose
37mPerformance in Compose:Lessons learned from Lazy layouts
38mBringing Your Canvas Creations to Life with Jetpack Compose
24mJetpack Compose Performance Improvements Learned from Real Examples
21mPerformance best practices for Jetpack Compose