How You Get Your Compose UI From Hundreds of Recompositions to Almost Zero

Understanding Jetpack Compose Recompositions
📌 The video focuses on deeply understanding Jetpack Compose recompositions, how to optimize them, and when optimization might harm code quality.
⚠️ Premature optimization should be avoided; only focus on performance improvement if noticeable issues like a laggy UI exist.
⚙️ Compose performs three main phases per frame: Composition (UI hierarchy decisions), Layout (positioning and sizing), and Drawing (rendering pixels).
❗ Only changes in the composition phase (structural changes, like swapping Composables) necessarily cause recompositions; layout or drawing changes might not.

Initial Optimization: Decomposing Parameters
🔍 Initial inspection showed a specific person item recomposing over 100 times when its loading progress updated frequently.
✂️ Optimization step one involved passing individual fields (like name, progress float, loading boolean) instead of the entire complex `person UI` data class to the item Composables.
🐞 Even after parameter decomposition, recompositions continued because lambdas (like `onLoadDetailsClick`) were being recreated on state changes, as lambdas are compared by reference.

Advanced Optimization Techniques
✅ Used `rememberUpdatedState` to freeze the reference of the frequently changing progress lambda, ensuring the underlying value is updated without triggering recomposition just because the lambda instance changed.
🧠 To fix the still-changing `onLoadDetailsClick` lambda, the person ID (known to be immutable) was remembered using `remember { person.id }` and passed into the lambda, preventing its unnecessary recreation and subsequent recomposition of the parent item.
📉 These two techniques reduced the person item recompositions from over 100 down to just twice in the observed scenario.

State Restructuring for Deeper Optimization
🧩 Further recompositions of the root screen and `LazyColumn` occurred because the entire screen state, including the `peopleList`, was a single instance passed down from a `StateFlow`.
🔄 The most advanced step involved extracting the `peopleList` into a `MutableStateList` (a list of snapshot states) managed in the ViewModel, decoupling it from the main screen state data class.
📉 By passing the `peopleList` as a separate parameter to the screen Composable, structural changes (swapping progress indicators for details) caused only two necessary recompositions, while progress updates during loading showed zero recompositions for the entire duration.
💡 This technique relies on deferring state reads (e.g., reading the progress inside a non-composable draw scope), meaning visual updates occurring in the drawing phase do not inherently trigger UI recomposition.

Key Points & Insights
➡️ Be extremely cautious with complex optimization, as harming code quality for minor gains is often not worth it if performance is already smooth.
➡️ Recompositions are only strictly necessary when the UI structure changes (Composition phase); layout or drawing updates might be handled without full recomposition.
➡️ Lambdas are compared by reference; if a lambda parameter changes reference (even if functionally identical), it causes a recomposition. Use `rememberUpdatedState` for frequently changing values passed into lambdas.
➡️ For immutable data used within callbacks, remembering that specific value (`remember { data.id }`) can stop unnecessary lambda recreation and subsequent recompositions.
➡️ Restructuring state into smaller, granular snapshot states (like `MutableStateList`) allows Compose to skip updating parts of the UI that haven't truly structurally changed.

📸 Video summarized with SummaryTube.com on Mar 10, 2026, 11:49 UTC