Jetpack Compose Debugging to fix performance problems Yahoo Japan Corpora+on Android App Developer, Yu Tanigawa © Yahoo Japan

About Me • I’m an Android app engineer at Yahoo! JAPAN since 2021. • I’m developing PayPay Flea Market and Yahoo! AucCon app. • I have been developing personal Android app since I was a student. © Yahoo Japan

About Me • I’m an Android app engineer at Yahoo! JAPAN since 2021. • I’m developing PayPay Flea Market and Yahoo! AucCon app. • I have been developing personal Android app since I was a student. © Yahoo Japan

Agenda In this session, I will recap about “Debugging Jetpack Compose” lecture of Google I/O 2023. h"ps://io.google/2023/program/a3ed5302-d787-41bd-8623-54193d36caf0/intl/ja/ © Yahoo Japan

Agenda • RecomposiCon State in Debugger • Layout Inspector • DemonstraCon • Summary © Yahoo Japan

01. Recomposi-on State in Debugger © Yahoo Japan

Recomposi3on State in Debugger • Android Studio Hedgehog or later can check the “RecomposiCon State” within the standard debugger • By checking the “RecomposiCon State”, it is possible to easily check the parameters that triggered the recomposiCon © Yahoo Japan

Recomposi3on State in Debugger • Android Studio (Hedgehog) からデバッグツールでComposableの検証がし易 くなった • 「Recompositon State」というパラメータをデバッガで⾒れるようになった © Yahoo Japan

Recomposi3on State in Debugger • Android Studio Hedgehog or later can check the “RecomposiCon State” within the standard debugger • By checking the “RecomposiCon State”, it is possible to easily check the parameters that triggered the recomposiCon © Yahoo Japan

Recomposi3on State in Debugger • Android Studio Hedgehog or later can check the “RecomposiCon State” within the standard debugger • By checking the “RecomposiCon State”, it is possible to easily check the parameters that triggered the recomposiCon “isShowLikeBu-on” has Changed © Yahoo Japan

Recomposi3on State in Debugger • Unchanged • Changed • Uncertain • Sta.c • Unstable © Yahoo Japan

02. Layout Inspector © Yahoo Japan

Layout Inspector Pros • Debug the scrolling of lists and ViewPager without stopping the app • It is possible to intuiCvely understand the recomposiCon count only within this tool. • Visual confirmaCon of the recomposed area Cons • Unable to idenCfy the parameter that triggered the recomposiCon © Yahoo Japan

Layout Inspector © Yahoo Japan

Layout Inspector © Yahoo Japan

Layout Inspector © Yahoo Japan

Layout Inspector Recompose count: Indicates that the parameters have been changed and redrawn Skipped count: Count of skipped composiCons, assuming no difference in parameters © Yahoo Japan

Layout Inspector • Recomposed Composable is highlighted in blue to visually confirm the extent of the redraw. © Yahoo Japan

03. Demonstra-on © Yahoo Japan

Demonstra3on In this demonstraCon, I will add items to head of items list. © Yahoo Japan

Demonstra3on a © Yahoo Japan

Demonstra3on a © Yahoo Japan

Demonstra3on Pass ITEM ID as the key in LazyVerCcalGrid items. © Yahoo Japan

Demonstra3on Pass ITEM ID as the key in LazyVerCcalGrid items. items( items = items, key = { it.id } ) { item -> Item(item = item, isShowLikeBubon = isShowLikeBubon, onClickLike = onClickLike) } © Yahoo Japan

Demonstra3on Pass ITEM ID as the key in LazyVerCcalGrid items. items( items = items, key = { it.id } ) { item -> Item(item = item, isShowLikeBubon = isShowLikeBubon, onClickLike = onClickLike) } © Yahoo Japan

Demonstra3on © Yahoo Japan

Demonstra3on © Yahoo Japan

04. Summary © Yahoo Japan

Summary • Android Studio Hedgehog or later can check the status of recomposiCons within the standard debugger • Layout Inspector provides a method to check recomposiCon and skipped count without stopping the applicaCon. • Layout Inspector allows you to visually and clearly see the recomposed area when data has changed. © Yahoo Japan

© Yahoo Japan Thank you for listening!