Blast Off_ Managing Hundreds of UI Updates for Emoji Cannons
summary
Builds an emoji cannon in Jetpack Compose and shows concrete fixes: replace normal modifiers with offset lambda and use graphicLayer for rotation/alpha to eliminate ~300 recompositions per emoji, then add a unique ID plus the key utility function so removing finished items doesn’t recompose siblings. Stress test sent 10,000 emojis, skipped 728 frames and 12s GC pause with ~200MB allocs; after fixes memory drops back to ~95MB and animations run smoothly. Tools: Layout Inspector, memory profiler, MutableStateFlow.
AI-written summary · about
chapters (7)
- 0:00Introduction to emoji cannons
- 2:35Performance issues with recompositions
- 5:05Firing 10,000 emojis
- 7:54Fixing list recomposition issues
- 9:46Production example at Tilt
- 12:15Key takeaways and particle effects
- 14:03Closing and hiring
related talks
36mJetpack Compose: Drawing without pain and recomposition
48mLet's Build a Colaborative Emoji Panel with VueFire
46mShipping "Smart UI" with RemoteCompose
55mCompose Quiz
34mHigh-Performance, Expressive Remote UI: Deep Di…
37mSomething old, something new: Adding Jetpack Compose to a large open source Android app
39mCross-platform UI Engines Rendering Performance
18mCompose Adoption at Pinterest: A Postmortem