Optimising UI in Jetpack Compose

on YouTube ↗55m

" summary

Shows a real bug: an auto-resize Text that keeps reducing font size until it loops into continuous recomposition, and fixes by breaking UI into smaller composables so only the follow button or post list recomposes. Demonstrates use of remember(key=...) so cached values don’t reset, uses launchEffect/disposableEffect (with a 500 ms debounce and cancellable jobs) to manage side effects, and inspects counts with Layout Inspector and a Compose compiler metrics HTML report run in release to find skipable vs restartable composables.

AI-written summary · about

" chapters (11)

1. 0:00Jetpack Compose UI optimization intro
2. 1:14Composable functions
3. 4:49Composer and recomposition
4. 11:20Fixing recomposition loops
5. 14:12Breaking UI into composables
6. 17:26State hoisting best practices
7. 21:01Side effects in Compose
8. 26:38Avoid recompositions with remember
9. 33:28Stable state for performance
10. 38:39Measure Compose performance
11. 44:25Q&A

" related talks

• 31mDesigning Media Friendly Jetpack Compose ComponentsTunji Dahunsi · droidcon New York 2024
• 21mPerformance best practices for Jetpack ComposeChuck Jazdzewski, Ben Trengrove · Google I/O 2022
• 44mBoosting Compose UI from Sluggish to SnappyAkshay Chordiya, Tasha Ramesh · droidcon New York 2023
• 39mRe-Compose your UI: building an atomic design libraryTatiana Irene, Giuseppe Scabellone · droidcon Italy 2022
• 18mCompose: Implementing responsive UI for larger screensMatvei Malkov, Alex Vanyo · Android Dev Summit 2022: Form Factors
• 43mBuilding Accessible Apps with Jetpack ComposeKarol Wrótniak · Android Worldwide July 2023
• 49mBuilding an Android UI using declarative programming in Jetpack ComposeRobert Söderbjörn · Jfokus 2022
• 36mPractical implementations of powerful UI expressions using Jetpack Composeyokomii · DroidKaigi 2023