Mastering Recomposition: Optimizing State Changes for Efficient UI
summary
Jetpack Compose recomposition is driven by snapshot state reads, so changing a snapshot state property triggers recompose and getters set up listeners; recomposition is usually cheap and heavy work appears when components do costly calculations. A demo using the layout inspector shows screens “blinking” on recompose; a measured optimization of the value provider pattern reduces some leaves but costs a lot and often isn’t worth it. Use narrower read scopes, pass specific props, supply keys, stability analyzer helps spot issues, remember expensive or mutable values, and optimize only after profiling.
AI-written summary · about
chapters (20)
- 0:00Re-composition in Compose
- 1:28UI tree from composition
- 3:17Snapshot state drives re-composition
- 6:54Re-composition propagation
- 7:14Value provider pattern pitfalls
- 9:11Measure re-composition with Layout Inspector
- 12:43When recomposition becomes a real performance issue
- 15:38Efficient recomposition best practices
- 17:43Narrower state reading scope
- 19:05Pass only needed properties
- 20:08Avoid recursive triggers
- 21:12Use keys to preserve identity
- 23:38Remember expensive values
- 24:40Lift state to ViewModel
- 26:26Q&A on composition
- 28:14Stability and skipping mode
- 32:27State pattern vs property pattern
- 37:23Canvas calculations handling
- 40:14Complex UI state with sealed classes
- 44:30Closing remarks
related talks
36mUnderstanding Recomposition Performance Pitfalls
38mWhat does Recomposition mean to your app?
42mJetpack Compose: Art of the State
49mWhat does Recomposition mean to your app?
28mCompose at Scale: Stop Unnecessary Recomposition
55mWhat does Recomposition mean to your app
21mPerformance best practices for Jetpack Compose
34mCompose Performance: Hunting for unnecessary recompositions