UseState in React Native

hey there everyone that they share back again with another video and welcome to the react native series hope the Subscribe button is already clicked hope the share button is also working for you and you are sharing this series so in this video we're going to be continuing our app that we are building which is a password generator in the last video we saw a little bit about the yup package and it's a nice name yep in this video we will talk a little bit about the state and especially the use State hook now in case you are coming up from a react background that is going to be super easy to understand if not that is also totally fine so so far what we have done is we have clicked a button some things have changed and all things like that but obviously eventually you will need to change a lot of things like a check mark of the buttons or maybe you need to enter some input where you'll be entering some numbers and that number need to be shown or displayed there so there's a lot of things that changes over the UI of an application especially of a mobile application now while the hook that you'll be using or one of the statement that you'll be using is use state now this is a game changer hook in the entire react of the entire react ecosystem whether it's a react or react native what this does is whenever you use or you want to change something on the screen by the screen I mean to say your Mobile screen it's the same concept applies for the react as well for your web screen as well so whenever there is a chance that you want to update something on the screen you need to tell that screen somehow that hey I have updated these elements or the values of these elements so you go and re-render those particular elements now the job this exact job is done by the use State hook now in the world where we used to have class based component we had different life cycle method the component did bound component did Unbound So based on that we can send signal to the UI that you can change it but now we don't use class based component that much everything is functional now and one of the best way of actually accomplishing this task of updating the UI we can use the state now the advantage with the state and one of the problem that Facebook solved by using this entire react ecosystem term is no matter how many people or how many on how many places this value is getting updated it's the job of use a state to actually tell the UI to update the values so you can just manipulate this wherever you like in the source code and you don't have to worry that I have to go and update the UI you you don't worry about that so that's a great advantage of the use data so what we're going to do is we're going to learn how we can use that it's really one of the simple it is almost like declaring variable but in a different style the syntax is a little different so what we do is we simply go ahead and write a constant variable then we use an array I'll tell you what comes into the array in just a minute and then you simply go ahead and say use a state something like this user State and once we have this user State we simply go ahead and use parenthesis and inside these parentheses you pass on the default value so the variable whatever the default variable value of that whatever the default value will be going into that variable will come up here for example it can go as empty string it can go as number it can can go as a true or false value so whatever the default value you want to send in you can go ahead and use this in this case I'll go with the empty string now what comes inside these uh these square brackets is the the variable name for example I'll have a variable that I'll call as password not only that you also go ahead and say set password now what is the set password now this parenthesis or this array actually is predefined we don't do it we don't do definition it's a placeholder the first value that we place is a variable itself and the second value that we hold up here is the method which is going to update this value so that's all that's all it is this is a variable and this will be responsible for updating the value you never ever go and update this value directly you always use this method or this function to update the value this is responsible for for saying that to your UI that hey go ahead and update that that that's all the magic is going on that is all super easy see so this is what we do and make sure you use this use State here at the top as well it's a kind of a code react thing so it's not a react native thing it's a react thing but the functionality is exactly same so we have now a variable which we say is password it has an empty value empty string and the set password is there to change it you'll find this common syntax of you saying that set but it doesn't need to say a set it's a common uh kind of a convention that everybody use but you can call it as hitesh password but it doesn't make sense now similarly there are a lot of shortcuts you can use for this one for example I can go ahead and say use State just like this use a state now it doesn't autofill so what we're going to do is we're going to defining a couple of more of these variables the first one is going to be is pass generated because we have some conditional rendering we are going to learn later on the card that you saw at the bottom is only available when the password is generated otherwise it is not so we'll be using this exact variable for that purpose so we're going to say set is pass Jane rated and that is going to be again use State there we go and the default value this time we're going to be putting up is going to be false there we go so these are the two major one we obviously need to have values for lowercase uppercase numbers and symbol as well so let's go ahead and quickly do that let me do that in the fast forward mode all right so we got all the states that we wanted to have now again always treat States as just like variable but there is a different way of using the variable just try to have this mindset and you'll always be super happy this is just available and whenever you need to change any value update any value remove any value just use these methods to do so and that's it you will make your life super easier so that is it your basics of how the states are going to be there now we need a couple of methods actually to make sure the functionality is there now the functionality is super easy it's not really complex it's just a password generator but I would love to have a boilerplate methods or functions up front here so we're going to call this one as generated or generate password string and what it's going to do is really simple we are going to have a simple password length needs to be passed on to this one so we're going to say password length and that is going to be of type number there we go and we right now are going to just put up an empty slashes here so that it doesn't just collapse that is my first method that this method is going to be responsible for somehow generating the password string but actually the magic will happen here so we'll say const create password and definitely this is going to create a password all we have to do is provide characters and the characters that we are going to provide it is going to be in the format of string and we also need to provide it password length so we'll be providing this password length which will be in the format of number how we are going to do this that is still a little bit mystery so we're gonna do that in the next video itself there we go this is the second method that we'll be working on and one more thing that we need to work on is very interesting concept itself which is reset password this is not just for resetting the password but rather a reset of password resetting the state of the password what does that mean that's a very interesting question in all together we'll be working on that this is a common thing that we'll be using maybe you are working on a form sign a form login form wherever you will be using this is a common mechanism that we are going to understand together it's really important really interesting and gives a really great user experience once you actually learn how to use it properly so there we go we have done we haven't done much in this particular video all we have done is a really simple couple of boilerplates and we understood the concept of what the states are nothing much just some variables and the functions to change those values inside those variables that's all what we have studied let's go ahead and catch up in the next video

Channel: Hitesh Choudhary

Views: 24,216

Keywords: Programming, javascript, React-native, react, hashnode, android, mobile apps

Id: ORSHG3dfUrk

Length: 8min 22sec (502 seconds)

Published: Sat Feb 25 2023