4 Ways To Debug Recomposition in Your Jetpack Compose UI!

in compose one of the most important concept is recompositions in this video I'm going to show you some of the ways to debug and find out why composes are recomposing and when so my friends welcome back to the channel always with un Sheri let's get started with some break compositions so here in this project I have a very simple application I have a text here and this text present Lambda whenever it's clicked so we are changing that text using this observable or this state if you run the project here you will see it's very simple project so here you can see we have a text and once we clicked on it right you click on it you are getting the current Tim right there is a reason why I'm putting it inside another composable so I can show you one of the ways so the first way to know that this is recomposing is to use layout inspector right you can press here for the layout inspector remove this one wait for it to add to the process so here sometimes things are collapsed so you can navigate to the things here right so if I start clicking you will see there is this composition you can click here to do show compose or show recomposition SC so whenever I click on it it is recomposing okay and you can see here some kind of effect happening okay this is one way you can do this there is actually another way which is posted also on stock overflow how to detect what is causing Rec composition now this actually different thing what is causing recomposition and knowing that there is a composition is different thing we are going to get there there is one critical or lovely class I I saw here which is recomposition highlighter this is a code you can copy and paste right I will put the link in the description so what you'll have you will have something like that recomposition highlighter right this is the code and it is using the composed modifier yeah it is using the compos modifier this is critical so it will be just a time of the recomposition okay this is a lot of code here I won't go to this code in here but the beauty here you can add another modifier for your thing that you want to understand why it is recomposing or whether it is recomposing in or not okay so you can do recompose highlighter like following once you rerun your application perhaps you want to use this one whenever you are developing the feature and once it is done and stable you can remove this one right the beauty is that when you click on this one when you click on the text it will start drawing stuff if I click on more on it it will start drawing a rectangle and this will get bigger and bigger Whenever there are more recompositions so I don't have to open any layout inspector and notice them directly there I can only use this modifier for the things especially if you have long list and there is what we call Lazy column so you can add to one element and you can see it visually even if you are not caring about recomposition you are going to see that something is not normal because once you start seeing this rectangle and it will get until to Red you will see it is recomposing a lot okay this is a cool visual effect you can do all right this is the way one of the ways to know that this one is recomposing okay it is Rec composing but why it is recomposing it's because of this text it's because of another thing so you want to debug also why it is recomposing one of the cool things directly since you are using Android I'm using here Android Studio this one guo right if you are using Hedgehog something like that I think this also feasible you can just add a debug here right and rerun it with the debug you can skip the first iteration or the first time in the debug mode okay this is the beginning the first time it will run it will be here you can skip it right and of course you are knowing you are working with your composable once we click on it it will reexecute here one of the things you are going to see here is something called recomposition State uh it will tell you the composable this one argument different the text is different and on click is the same as the previous one so the decision will be to recompose it okay so you know that there is a problem of this text string here so you know okay it is changing because you are Chang this it may sense but sometimes you will see something weird and then of course you have to find a solution because the purpose here is just to give you tools so you can find out what is recomposing okay that's a good thing this is a good one but again you have to use debugger you have to wait for debugger and everything there's actually a much better solution to that so you don't have to do that there is actually good also library that is called rebug okay it is by the Apache this cool guy good project so this is simple thing you add just this implement ation detail right and then for all for all your composes that you want to track why they are changing you just add this composable function called debugger and the the main important thing here is that you need to give it some of the things to track so it will tell you which of those things that you are tracking cause the recomposition the beauty also you can do this without any debug thing right you can use directly the rebug and here you can give it a map off and you start giving it the things that you need to track and these things are the source of recomposition okay the beauty is that even if you don't give it the thing that caused the recomposition it will tell you hey it was recompose but I don't know the reason and it will tell you like here you can see it here in the in the code recompose right but the reason is unknown are you sure you added all the parameters to track map okay implementation is fine it's pretty simple just using the side effect and similar stuff but it is really CLE and again you can use it in the moment you are creating your composable debuging it of course and moment of development and once everything is stable you can remove it same thing as this one okay I have already created this one so here is an example of this one I'm tracking the text and the call back I can rerun it and you don't have to wait for anything can just run your project and just go to lock at to see what is happening I can go to lock at and I will delete everything okay you can see rebug is activated once I click on it you will see hey rebug recompose because text changed from this one to this one this is actual Beauty can do the same exact thing it's recomposed because from this one to this one and now since you know the reason you can go to dig why something is happening whether it is intentional or not intentional and from there you can whether optimize or not I actually made another video about composed performance you can check it I think in the above right the cards so this is pretty much it about this video again in order to find out whether things are recomposing or not you can use this recompose highlighter this is a cool one or you can use layout inspector this also fine it's good and then to understand why things are recomposing you can either use this rebug this one of musing and also you can add some things here about debugging so in the debugger it will tell you that there is a recomposition state previously it wasn't added now it is added in new Android Studios it will tell you things that changeed and then you can see how you can solve this pretty much it for this video thanks a lot for watching this video to the end if you didn't subscribe to my newsletter which is about productivity for developers please join the link in below and thank you very much and see you in the next videos

Channel: Charfaoui Younes

Views: 895

Keywords: android tutorial, android clean code, android model view view model, android mvvm, android, studio, development, dev, app, data, views, jetpack, library, explained, explain, how to, guide, tutorial, kotlin, java, mobile, splash, screen, fetch data, network, animate, animation, compose, api 31, api, android 12, api 21, splash screen, android splash screen, splash screen android studio

Id: Az9wDPMX92g

Length: 7min 25sec (445 seconds)

Published: Wed Apr 17 2024