State in Jetpack Compose using Kotlin | Android Studio

hey everyone welcome back to my channel in this video we will cover State incompossible this is a completely new concept for you and also it's very easy so let's see what is state state in jet back compose refers to mutable variable now what is mutable something that is capabil to change means it's not fixed on the other side immutable means that is fixed so mutable variable means a variable that can change letter now the definition does not stop here it also says when it's value changes allowing the UI to automatically reflect the updated State without manual intervention what does this mean it means if any changes happens in the value or variable those changes will be automatically reflected in the UI component if you have watched my previous videos there I have used manual way of updating the UI in XML but here jetpack compost says not anymore state will do that for you trust me whatever I'm saying right now will make sense to you once we will create our example project but for now let's see how state is different from variable I'll give you four points first recomposition trigger recomposition means to form something again in this case it says instead when the value change automatically updating the UI to reflect the new state while regular variable do not trigger recomposition while regular variable do not trigger recomposition and require manual UI updates got it second observability it says state are observable enabling the framework to efficient ently track changes while variable lack observability third immutable versus mutable it says state are always mutable which allows modification while variables are typically immutable means fixed fourth scope to composes it says states are often scope to composable ensuring that the state is localized and specific to the UI component while variables may have a broader scope simple now let's move on to the important part that is syntax see this is how we normally declare variable right where AG is equal to zero but this is how we declare State variable where age by remember inside it mutable state of zero now I know you might have a lot of questions what is by what is remember and what is mutable state of we willover cover it but before that I also want to clear this in cing we have two types of variables where and well this is where means mutable whose value can change and well means immutable whose value never changes if you already have where which is mutable then why is there a need of State because State not only changes the value but it also reflects it updated State on the UI component while a normal variable can't do that got it you will see when I will create the project now first let's see what is buy buy is not a concept of jetp compose instead it's a concept of codling by is a keyword that is used with delegate pattern to create delegated properties now what is delegated properties it allows you to implement the logic for a property in a separate class delegation will help you to write more concise and reusable code it's a good alternative to inherit tense got it next part of syntax is remember remember is a function used to retain the state across recomposition means it will preserve the stateful data without resetting during UI updates now what is stateful data there are two types of pattern stateful and stateless stateful means it has memory of previous request while stateless means something that has no memory of previous request it so in our case it is stateful data which means remember keyword remembers everything from the previous request and accordingly to that it updates the UI next is mutable stateof it's a part of mutable class as the definition says it is a function that creates a mutable State variable which means a variable that can be further modified and it also says that it returns a pair containing the current value and a Setter function that ultimately means allowing modification of the state and triggering UI recomposition when the value changes got it t it clear now it's time for some practical example so go to your Android Studio here I have removed the default code then I will create a compos function as learn state and make sure to call it here inside the set content and done now inside composable function we will see two situations one with the normal variable and second one with the state variable okay also we will Implement a very simple example where we will simply increment the age that's it so to do that I will create a normal variable as where a age is equal to zero simple also I'm using wear which means mutable this is how we normally write correct then I will create a button so when you will click on it it will increment by one simple so to do that as I said in my previous video we can't directly write button because it will take the entire screen so instead first we will create a layout and inside that layout our UI component so for the layout I'll use column layout then inside it our button so when you will click on it it should increment by one so to do that I will write h++ here in on click and then on the button the text will say I am age variable years old now let's run the app and and see what happens okay so here is a button I'll click on it and nothing happens don't worry there is no error from our side the project is working perfectly fine even the age is incrementing but at the back end only that it's not reflecting on the UI means on the button let me show you at the back end means in locket so to make it visible at locket here I will add a lock and done just to show you what is happening at the back end see when I will click on this button it's not updating on the button but look over here in the back end you can see it is incrementing here and that's what I was trying to explain you through Theory here the age will update because we are using where which is mutable but it will not reflect on the button and that's when State comes into the picture now I'll remove this log and come in this normal variable instead we will use State variable so remember the syntax where variable name that is AG by remember and inside it mutable state of that is the initial value which is zero now let's run the app and see here I will click on the button and look the AG is getting incremented and also it's visible on the button itself amazing right we will be using state in upcoming projects for sure for now that is it for the video if you're new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 492

Keywords: jetpack compose, android, jetpack tutorials, compose, learn android app, learn jetpack compose, app in jetpack compose, create a app, android studio tutorials, jetpack compose android, 2024, series, learn android, create jetpack compose app, college project app, final year project app, android development, android knowledge, learn app development, mobile apps, develop apps, create an app, tutorial, topic, new android video, latest android studio, error, solve error android, code

Id: ClWcRPJ3Eyc

Length: 9min 10sec (550 seconds)

Published: Thu Jan 25 2024