React Hooks Mastery: Building Modern React Applications with Projects

1. Course Introduction: Welcome to the course on mastering react Hooks and building web applications using modern react. My name is Faisel, and I'll be your instructor for this course. I'll be your guide throughout this entire comprehensive journey into the world of react hooks. Now, as a passionate developer, entrepreneur, and educator, I have designed this course to help you unlock the true potentials of react functional components with this amazing concept of react hooks. Now in today's fast paced tech world, mastering react hooks is a game changer. They allow you to write cleaner, efficient code while solving complex problems in a simple way. Whether you're just starting with react or whether you are an advanced level tabloper or whether you are someone who's intermediate, this course has to offer something for everyone. Now, in this particular course, we begin by talking about what react hooks are, why hooks matter, and why this concept of hooks exist in the first place. Then we talk about hooks like us State hook and we understand how to make use of it. We talk about hooks like usefHok, use effect hook, we cover use context hook. So a lot of hooks are covered in this particular course, and in the end, we also learn how you can create your own custom hooks. Now, during this journey of learning and understanding hooks, we also build a lot of projects. Okay, we build a few projects that cover the usage of these hooks. So you basically not only get to learn the concepts, but you also get to implement these concepts into real projects. And this is what makes this course completely hands on. So I make use of minimal slides and I basically focus on all the hands on explanations. So that is where my focus will be. I basically stick to the IDE and I make sure that I explain everything with the help of examples within the ID itself. By the end of this course, I can guarantee you that you will not only have a solid foundation in the world with the concept of react hooks, but you will also have confidence to build dynamic, scalable react based applications. This course is perfect for developers who wants to stay updated with the current trends with modern react practices and build some hands on projects along the way to deepen their understanding. I'm so excited to take you through the class. Are you ready to elevate your react skills and dive into the world of react hooks? If you are let's embark on this journey, and I shall see you all inside the course. 2. Welcome to React Hooks: A Functional Revolution: Hey, there. Now it's time that we begin talking about react hooks and understand what they are. All right? Now, whenever you are building any sort of web applications and if you're building any sort of functionality, okay? Whatever programming language you're using, whatever framework you're using, there will always be scenarios wherein you would want to add some dynamic behavior to the elements onto the web page, right? For example, on click of a button over here, for example, I might want certain page or certain part of the page to be updated just on the click of this button. A the thing over here is only that part is supposed to be updated and not the entire page. But what happens is in traditional web development, if you click on the button, the entire page reloads just to update that particular part. That is traditional web development. But you know with react, you have a way wherein you could add dynamic behavior to components. Making them interactive responsive without needing a complete page reload. Okay? So this is possible with the help of the concept of hooks. All right? Now, hooks are nothing but special features that let you add a dynamic behavior to component. And it's just not about updating the page without complete reload, okay? There are a lot more things that can be possible with react hooks. So updating the page without complete reload is just an example that I gave you to help you understand. All right? For example, I have this code base over here. Okay, this is from code sandbox. It is a publicly available code base developed by someone. And here, I saw this code wherein there is a counter created using react. Okay. So here, I can say increment, you can see, and this is decrement. Now, on click of these buttons, it is incrementing and decrementing without page reload. And this is possible with the help of react hooks. Okay? Now, this is one possibility. There are any number of possibilities. There are different kinds of hooks available in react that you can leverage to build to do different kinds of stuff. And every hook that exist has some sort of speciality in which you can use it in your application. All right. So what are hooks? Hooks, let you add some interactive features to your application in a simple way, and it helps you to make your app more interactive where things change as you interact rather than a static web page, right? So this is very useful, you know, this kind of functionality, like this kind of feature is very useful if you're building a sort of form, let's say, and depending on what user is typing or any sort of handling you want to do for the user input, any sort of data updates. For example, user typed over here and you might want something to be updated at different parts of the page. All these updates can be driven smoothly giving your users a better experience, right? And this makes your web app very engaging and responsive. Now, here in the official documentation of react hooks, you will see that hooks lets you use different react features from your components, okay? And like I said, there are different kinds of things that you can do with react hooks, and that is what is being termed as react features over here. Okay? So now talking about hooks, there are built in hooks as well that react provides, and you can combine them to build your own as well. So you can even create your own custom hook, right? And here on the left hand side, you will see the list, okay? So use Action State, use callback, use Context. These are all hooks, right? There are quite a few. Okay. We'll be talking about the most important ones. For example, some of the hooks that are used a lot is use state. So if you're working on react, you'll see state being used a lot. Use ref being used a lot. Use effect is also one hook that is always used in react code base. So we'll talk about we'll talk about hooks that are very common. And once you get hold of a few hooks, then it will be very easy for you to build your own react applications that make use or leverage react feature right from within the components. All right. So this is react hooks. There are quite a few that we need to learn and understand how we can make use of and why they exist, right? Every react hook has some ability that it provides. And depending on your need, you decide as to which hook you want to hook you want to implement in your application. All right? So that's about react hooks. I hope this gave you a decent overview of what hooks are and why they should be used in react. 3. Unveiling React State: The Foundation of Dynamic Apps: Hey, there. So now it's time that we begin talking about states in react, and it's important that we understand this concept so that we can make use of use state hook in react, which is one of the most commonly used hook in the react applications, right? So what is a state? Now, a state is any kind of information that your web application might want to store. All right. Now, of course, here you can see this application. Okay. And here at the top, you have some settings. Okay? Now, this setting will enable me to put on a light mode or a dark mode, so I can turn on this, okay. There is this button also. I think this is for okay. So this is for translations, I believe. All right. But this is also setting, if I want to see the website in some other language, I might choose a different language from here. If I don't want dark mode, I can change the mode from here, right? So what is happening over here is this website, react dot EV is storing a kind of setting or a preference for me as a user, right? So I am a user. I'm interacting with this website. I'm setting up the preference as dark Mode. So it is keeping this preference in mind that, hey, this user wants to see or read this website in dark Mode, and whenever I'm visiting, it is showing me the preference. Whenever I'm visiting, it is showing me the website in that particular way, right? So this is a kind of information that it is holding about its user. Right? Now, think of this like a bookmark that you would use when reading a book. So imagine you are reading a novel, and as you progress through the chapters, you keep a bookmark to remember where you stopped, right? So this bookmark, which changes as you move forward or sometimes you revisit the previous chapter, the bookmark would change, right? So it represents your current position in the book. It's an information that you are trying to remember about your reading journey, right? So it's an information, right? So that is this information that is being stored by any sort of web application in the react world is known as a state. Okay. So state is like that bookmark we talk about or even like this setting because it is remembering this information about the user, right? Bookmark is also something that the application would remember about the user as to where the user has reached. What is the journey of the user, right? So to put it simply states is a way react like states in react. Is a way for react components to hold onto some information, that can change over a period of time, and it needs to be remembered. All right? Remember this definition. So states in react is a way for react component to hold onto some information, that can change over a period of time, and it needs to be remembered. Okay? Now, in this particular definition, two things are important. So I would just switch over to the definition over here in the notepad, okay? And I believe this is good because you can see as well the definition. All right. So there are two things I was saying, which is important, okay? There are a few things, I would say, okay? So one is the information can change. Okay? This is something that you need to keep in mind. The information can change. And this information is being hold as a state in react, okay? And it needs to be remembered. All right? Over here, the example I gave, this needs to be remembered, right? Throughout my journey. Now, if I switch over to learn tab, now what I mean over here is if I switch over to earn tab, this does not change to white mode. It is still dark mode, right? So the application is remembered that this user wants to see the entire application in the dark mode, right? Same goes with bookmark. Right? The application would remember that, hey, the user has finished reading until this point. So it will remember and it will keep on remembering. Tomorrow, if you open the application, the reading application or the book, it's not like the bookmark has changed to the first page, right? So when building interactive staff interactive applications, you will often come in situation where certain parts of your interface should change in response to the user interaction. For example, a button click, like I said, here, a button click is changing the entire website, right? And there will be scenarios wherein you might want to change a particular parts of the website as well, okay? Like button click, form submission or simply hovering on an element, okay, hovering on the element. Okay? So all of that could be managed with the help of state, all right? I hope this is pretty clear. Okay? So if you remember this definition over here, state in react is a way for a react component. To hold onto some information that can change over time, and it needs to be remembered as well. Okay? This is a really good and the simplest definition that I could have for this. Okay? Now, there will be some questions that you might have, okay? You will be like, Hey, why not just use variables, okay? Come over here. You said that state in react is a way for react component to hold onto some information that can change over a period of time. You can do this with variables as well, right? You can store some information into variables, and that information can change as well, provided it's not declared as a constant, right? This is possible with variables. So why have this new concept of state and introduce unnecessary complexity? The thing over here is states are different from that of variables. How? I'll give you a gist, okay, but you'll understand a complete picture only when you see it in action. But I'll give you a gist of how they are different. So the state in react, the magic of state in react is that whenever it changes, react knows to automatically re render the component or a part of it to reflect those changes on the UI. That is a magic of the state. Okay? So the updates, the reflection of updates. So whenever you click on this, for example, here, if I click on this, you can see the entire web page or this particular page is being re rendered automatically. This component is being re rendered automatically based on this button click. Okay? Tomorrow, I might have a button that might introduce a change in certain parts of the application. So on click of that button. State is changing and because the state is changing, that part of the application which is tied to that state re renders. Okay? I'm not sure if you're able to grasp this, but the magic lies in re rendering, which is not possible with variables. Okay? With variables, you have to handle everything in react manually. But with states, everything is taken care of because it's a feature that react is providing. And you'll see this shortly when I give you a demo of this, okay? So the magic of state in react is whenever it changes, react knows to automatically re render the component to reflect the changes on the UI. Okay? This is important. Now, another question some students might have is this one. Okay, how is it different from props or properties that we pass down to the component? Okay. Now, I would like to add over here that props, which are also known as properties are like a setting or attribute that you pass down to component, okay? They're read only, first of all, you cannot change the properties also, right? And they only passed in one direction, like from parent component to the child component, right? So props are different. The use case is different. It is like some information or setting or attributes that you might want to pass down to a particular component. They're different from states, right? So remember this, a state in react is a way for a component to hold onto some information so holding to information is an important part of this definition, and that information can change over a period of time, and it needs to be remembered. This is important. Okay? How is it different from variables if you're asked in an interview? Yes, it is different because react it works with react components. States work with react components. They are tied to react components, and react knows how to re render the component automatically if there is any change in the state. Okay? This is not possible with variables, right? And they're different from properties, okay, because they are read only. Properties are read only, I mean, right? And states are different. So I hope this is pretty clear. I hope I have been able to break this down in very simple terms for you, okay? You'll gain much more clarity. As and when you start using states and when you see your first program using react states, you'll understand how amazing this is, right? So I hope this was useful. 4. Mastering State in Functional Components with React Hooks: So now it's time that we go hands on with US State hook over here and react, all right? And for the same, I have this particular project created. It's a very simple project. Okay. Here you can see this is the code that I got generated using wheat and react. And here, I have this app component. And this app component is basically rendering a heading. Okay? It's just printing hello over here. Okay? And this app is being rendered here in mean dot s, okay? Man dot SX. I mean, okay? So there's literally nothing in app component, and what we are going to do is we are going to learn how you can make use of states in react with the help of hooks, and we're going to do this with the help by building an example, actually, and the example is going to be a famous counterexample, you know? So basically, this is one of the best examples I feel to learn about states because you can update the value of the counter. Increment decrement and play around with it. All right? Not talking about the output, this is the output that you're seeing from this application. All right. So what I would do is, first of all, since we are wanting to make use of use state hook, okay? So I'll tell you, first of all, what is use state. So use state is a hook that is provided to us by react, which enables us to add states to functional component. So this is a functional component, right? Functional component meaning components that are created with the help of functions, right, in react. And if you want to add State over here, we want to display a counter over here, right? So counter is an information that we want to display. The counter, we should be able to increment the counter as well as decrement the counter. So we should have two buttons over there, right? So in order to keep track of what the counter counter number is, in order to keep track of what the counter number is, we need state. And how do we add state to a functional component? We make use of us state, right? So this is a hook that is provided to us by react, and it makes our life easy when using features like state in functional components. All right. Now, I'll come over here. How do you make use of this? Okay? So I'm going to say import, and I'm going to say over here, use state, something like this. Okay? And you can see it auto populated us state from react. All right. So what this is doing is we are importing use state Hook from react module. Now react module has this named export, which we can import, right? And we'll be making use of this over here. Okay? Now, over here, within app, what I'm going to do is I'm going to define a state, which is going to be called as count. Okay? So I'm going to say const, and I'll show you the syntax first, and then I'll explain you what the syntax means and what is happening behind the scenes. All right. So I'm going to say count, and I'm going to have set count over here and I'm going to make use of use state over here. Something like this. And I'll pass in an argument over here, which is zero, and I'll end this with a semicolon. Okay? So we have added a state into our application. This state is called as count, right? And this is a function which helps us update this particular state. Okay? So now we are making use of use state over here to create a state. Now, what happens is whenever you are using use state, this is a inbuilt function that returns an array with two items. Okay? It returns array with two items. The first item is the state state itself. And the second item is a function to update that particular state. Okay? So it returned two items, and what we did is we made use of destructuring over here, array destructuring because this is returning in the form of arrays. So we made use of array destructuring, and we got the state name, like the state as count and the function as set count, right? So that is how state works, okay? Remember, it is returning the state and a function to update that particular state. All right. So this is something that we have for count. You will ask me, what is this zero over here? Okay? So zero is nothing but the current value or the starting value that you want the state to be initialized with. So when this count is created, its initial value will be zero. Okay? So I hope this is clear as to what this line is doing. Okay, to put it simply we are creating a state over here, and whenever we create a state in react, we make use of use state hook like this, wherein you can pass any sort of default or initial value that you want to have, okay? And use state returns an array, which consists of two things. One is the state itself, and other is the function to update that state. Okay? So we got both the state and the function in these two things over here using the concept of RAD structuring. All right? I hope this is clear as to what we are doing. Now what I would do is here, instead of saying hello, I would say counter value, okay? I'll say counter value. And now this state is just like a JavaScript variable, right? So I can make use of this syntax and I can display count over here. Now, the moment I save this and if I come over here, you'll see counter value is zero. Okay? If you make five over here. And if I save this, you'll see counter value is five. So we're seeing the initial value as zero and five. So I'll stick to zero. If you want the counter to start from five, you can have five as the initial value over here. All right. This is done. Now how do we update the state? So you have this set count function which you can make use of to update the state. All right. So what I would do is I would have a button over here. Of course, we would trigger updates using this button. Okay. And I'll call this button as increment. And I'll have one more button over here and I'll call this button as decrement over here, okay? We'll first work on increment and we'll see how we can increment the value of a counter. Okay? So I'll say on click over here. This is on click. And here, I need to trigger set count, right? So set count will accept a parameter, which is the updated count value. So what I would do is I would have a arrow function over here, and I'll say set count, something like this, and I would say the current value of count plus one. Okay? That is what I want to initialize it with, right? And I'll come over here. You can see these two buttons, increment decrement, you can increment. And you can see we have just incremented count over here, right? Have we done anything else? We have just incremented the count, and just by incrementing the count, the component is being re rendered and you are seeing the updated value of count being displayed over here. Okay. Let us do the same for decrement as well. So if you click decrement, nothing will happen for now. But what you can do is you can copy this over here and you can piece this and instead of incrementing, I'll say minus one. And I'll save this. And if you come over here, now you can decrement it like this, increment it like this, and you can see you have a very nice counter in action. And look at the amount of code that you've written. You've hardly written few lines of code, right? There's one line, and these are the two lines, like three lines, basically, right? This is what you have done, right? And react is doing so much internally. Okay? So let me tell you, whenever you are updating count over here, react is re rendering the component because it knows that the value of this state has changed and this state is associated with this particular component. What it's doing is it is triggering a re render and with the help of the re render, the component is being re rendered and you are seeing the updated value being displayed. This is much more efficient than rendering the entire page. Okay? It is just updating certain parts of the application from the efficiency standpoint. All right. So this is a very good this is a very good feature of react use State Hook, Okay, which we are using actively right now. Okay? We can even break this down. Okay, so right now what we are doing is we are actually having the logic over here with the help of anonymous function. Okay. What you can do is just for the sake of simplicity, you can have a constant increment count over here, okay, something like this. So this is a function that I'm creating. Okay. And over here, okay, sorry. So what you can do is here, increment Oops. So it will be a arrow function, and what you can do is you can say set count is equal to count plus one. Okay? And you can have set count is equal to count plus one, end it with a semicolon and end this well, end this as well with semicolon, right? And I'll have this over here. I'll say increment count. Okay. So that is what we are doing. We're keeping we are now defining separate functions over here. I can say decrement, decrement, count over here, and this can be negative Oops, negative over here. Okay? And in the same way, this will be decrement. Like this. Okay? And you can increment the value, you can decrement the value, okay? And you can increment or decrement the way you want, okay? So this is something that is possible over here. Okay? So yeah, I hope this was clear as to how you can make use of use state hook to add states into your react components. Okay. What we have done over here as a recap, we have added a count state for which we use use state hook, and this use state hook returned the state, as well as the function to update the state. And we got these two using the concept of RAD structuring, right? Over here, we have this initial value defined as zero for the state, okay? And we have two buttons. Using which we are modifying the state value. And whenever we are modifying the state value, what is happening, component is being re rendered and the count is updated automatically. Okay? So I hope this is pretty clear and I hope you have good understanding of what states are and how you can make use of states in react. Okay? Now, one thing I would like to tell you is this thing over here, okay? There is this question that students normally have. Why not use variables instead of states? Okay? So I would like to mention the magic of state in react is whenever it changes, okay? So imagine handling all of this using variables. Imagine having a count variable and not making use of state hook over here. Okay? You would have to re render or update the component manual. Okay, which is not good. Here react knows automatically that you have to re render the component to reflect the changes in the interface. And this is really, really beneficial and helpful if your application grows big, right? If your application grows big, you're making use of multiple state variables, you're managing a lot of stuff. In that case, this becomes really, really helpful. Okay? And it is different from props because you cannot modify props in the child components. They're read only, and states is something different that allows you to have a better control and better management as compared to variables as well as props. All right? I hope this has been useful and I hope you have been able to follow along. 5. Effortlessly Handling Multiple State Variables: So right now we have this application which is having two buttons, increment and decrement and we're making use of use state hook to increment and decrement and manage a state for this particular component. We are making use of functional component over here. Now, the thing over here is we just have one state. Now, when you're working with react functional components, thanks to the use state hook, you're not limited to a single state variable. You may declare as many state variables as you need. Now, when state values are unrelated, there will be scenarios wherein you want to keep track of multiple multiple pieces of information. Like, for example, here we are keeping track of count, okay? Now, you might want to keep track of one more value, and when these values are unrelated, it makes sense to keep them in separate state variables. And this can help you make your code cleaner by grouping related data and separating the unrelated data. All right? Now, let us see how we can add one more state in this example over here. So here, we're simply incrementing the count by one and decrementing as well by one. Now, let's say I wish to have a customize I want to give you a customization to my users wherein user can tell me whether I want to increase the count by one or whatever value. Okay? So what I will do is, I'll add one more state over here. I'll call this state as step. Okay. And this step will define the increment and decrement should be by how much. Okay? So what I'm going to do is we are going to replicate this similar syntax. Okay? We're going to say use state, okay, over here, and Oops. And over here, I'll call this as step, and I'll call this a set step, something like this. Okay? And the default value that I'll have is one, okay? Because the default increment and decrement value that I want to have or I want to give to the users is one. Okay. Now this is done. Now we're here. What I will do is I will have an input over here. Okay. So let us say here. Let me go back and I'll say input. So I will add this just before increment and decrement over here, just after H one. Okay? So I'll say input over here, something like this. Okay. And for input, okay, I'll have the self closing tag. I don't need this over here. And over here, I can say type. Type is what is a type over here. So we are working with numbers. So I'm going to say number over here. Okay. And I'll also say value. Now what is the value for this particular input? So I need to bind this to the state variable. So I'll say step over here. Okay. I'll go to the next line and I'll say on change. So basically, if the user changes anything in this particular input box, I'm allowing changes, right so on change, I wish I wish to update the state, right? That is what we'll do. So I'll say on change, and over here, I'll I'll have a function. I'll say E, o make use of arrow functions, and I'll say set step over here, Okay I'll pass in E dot target dot value. Ather thing over here is this value will get passed as a string, right? So I can say parse in over here and I can wrap this up entirely into the par sent. Okay, so what is happening is we are saying et target dot value. So basically, this is the element, and we are saying we're getting the value from this element, and we're passing it to set step. What is set step over here? Set step is the function that is responsible for updating this state, and it is being called on on change. So any changes in this input box will be reflected into the state. Okay? It's binded now, right? Now, on incrementing and decrementing, I need to make use of step over here. That is one change I need to make. Okay. Now let us test how our application looks. You can see the default is one, I can increment decrement over here. If I make default as ten, and if I start incrementing, you'll see nine, 19, 29, 39, and I can decrement as well. If I say five over here, I can you can see over here, it's updating accordingly. So depending on what the value I'm changing over here, it's reflecting the change. You can see. So here, in this example, we're making use of two state variables, I would say, one is count, another one is step using step by which we want to increment the count. Right? So yeah, having multiple state variables in a single react component is absolutely possible. You can use multiple states to keep track of unrelated information that you might want to keep track of within a particular component. Okay? You can even beautify this if you want to. So here, this app is not looking that great. We are not impressed, right? So what you can do is here, you can come and I'll I'll add some CSS over here. Okay. So over here, for example, I'll say for input box, okay? I'll say input over here. For input, I'll say width of 50 pixels. Okay. And I'll say pairing of five pixels, okay? Something like this, and I'll say margin over here, margin of ten pixels. Okay, bottle. We'll add a bottle. I'll say one pixel solid and I'll add the color code as has C and radius Okay, for a radius of four pixels, something like that. Let's see how our input looks. Input looks decent. You can see. Okay. And we can add a little bit of CSS to buttons as well. The buttons that we have, they look pretty raw, right? Pretty rah mil buttons. So we can have padding. I can see padding of five pixel over here and ten pixel over here, okay? And you can see margin of sorry, five pixels. Okay. Botel I can say none. All right. And I can say radius. I can say radius of let's say four pixel probably similar to that of the input. And I can add a background color, background color of hash 007b, FFI have E, color code over here. You can even add a light blue over here if you wish to, to keep things simple. So I'll just say light blue, or just say blue over here. Blue, right? And you can see color as, of course, white. So this is for text. And then you can have Coso Cursor can be pointer, okay? And then you can have button, colon hover effect. Okay. So what is the hover effect for this? Ho is the background color update will be dark blue. Okay. So this is done and let's see if this and let's see how this looks like. Okay, this looks pretty decent, I would say, Okay, better than the earlier version, you can see, it's a decent CSS. You can add, uh a lot more over here, okay, if you wish to. Okay. So at the top here, I have this app container. I have margin. You can have margin, let's say, of 20 pixels. Okay. So I've added margin of 20 pixels, and this looks decent. Okay. So I think the app is looking decent right now, right? And you can improve the CSS further if you wish to. Okay. But since we are learning, I think that's absolutely fine. We are able to see the functionality work and how the react concepts are coming to life. All right. So I hope this has been useful and I hope you had fun. 6. React’s Async Nature: What You Need to Know: So now it's time that we talk about state updates. Now we have this counter application where we are able to increment or decrement the counter based on the button clicks. All right? Now, whenever you are performing state updates, you need to remember a couple of things. First important thing is state updates are asynchronous in nature, which means that they are not in sync. And what react does is it batches multiple state updates together. Okay? Now, whenever you are doing multiple state updates, you are supposed to make use of an updat or function. Now you will ask what is an updata function? So updata function is an arrow function or a simple function that is passed to pass when updating the state of a particular variable or a particular component in react. Okay? Now, let me give you an example for this. All right? Now, let us say we have this increment count, okay, I can increment it by one or whatever the step is. Okay? Now, what I would do is let me add one more pattern over here, okay? So I'll add one more button. Okay. And I'll say increment or let me add plus two over here. Thing like this. Okay. So what this will do is it will increment it twice, okay? And I'll say increment twice over here. All right. This function does not exist. So what we will do is we will come over here to increment count, and I'll duplicate this and I'll say increment. Twice, something like this. Okay? Now, what I want to do is I want to increment this twice. So I've incremented this once, and I'll increment this twice over here. Okay? If I come over here, you'll see this button. Now, ideally on click off this button, the counter value should be incremented two times. So from five, if it's five, it should become seven. If it's zero, it should become two. Why? Because I'm updating the state twice, right? Now, let me show you an example or let me show you a demo of this, okay? I've saved the file and if I do plus two, you'll see it is incrementing by only one. Okay? Let me do a refresh from zero, it will be one, two, three, and so on. Okay? It is not incrementing it by two. And the reason for this is state updates are asynchronous, okay? So it batches multiple state updates together. Now what is happening is over here, writing this set count or count plus one. It is equivalent to having zero plus one over here and zero plus one over here. It is equivalent to this. Why it is equivalent to this because the initial value of state is zero. If the initial value is one, then it is equivalent of writing one plus one and one plus one. The previous value. So basically, you are updating the count over here to two, right? So this is not being taken into consideration when executing this second line. The initial state of the count is taken into consideration. And the reason for this is because it is asynchronous and the multiple updates are patched together. So I'll just do control C. Okay. So this is not going to work, right. So what I will do is I'll make use of an updata function. Okay? So we need to make use of an update or function for multiple state updates. So I'll just comment this out, like so. Okay. I'll piece this over here. Now, to make use of updata function, we'll make use of a very simple arrow function over here that is going to help us perform the update. Okay? So here, I'm going to say count or previous count over here as this, something like this. And I'll have this over here. Now, previous count over here, this particular variable is having the value of the previous value of count. Okay? So I'll take this over here and this will come over here, something like this. Okay. And now let's see the output. Now, if I refresh, if I do plus two plus two plus two, you can see, it is incrementing by twice now. Right? So this is working fine. And what change we did is we are now making use of this arrow function over here, okay, which is just doing the job of taking the previous value of count and incrementing it by one. Now, this is just a convention over here where I have made use of this variable called PIV count. Normally, it's a convention. Normally, you would see if you read code online, you will see whatever the state variable is. The first letter is converted into capital, like C is capital over here, and PIV is added under or before the state name over here, which indicates that it's a previous value. Okay? You can also make use of C and C over here, C and C. The output is not going to change. Okay? So that's just a convention. If I do a refresh, and if I play it again, you can see, it's incrementing twice over here. So whenever you are wanting to do multiple state updates together, okay, it's best to make use of this kind of a syntax wherein we are making use of an update or function. Okay? Here, what is happening is previous value of the state is taken in C, and it is incremented by one. And then for the next call, previous value, which is the update like the one after the count is updated from this particular code over here, that is passed over here, and then it is incremented by one. So you won't as any bugs if you're doing things this way. Okay? It's a very common issue wherein developers do things this way and they are like, Hey, there is some inconsistency in my code, and I'm not seeing the desired output. And the reason for this is simple because of the asynchronous nature of updates, okay? So Update a function is helpful in this particular case. Here, in this particular case, if you're writing code this way, the updates are queued. Okay? So this first one is performed, and then the next one is queued. And then once the first one is over, this one is executed, and until then it's in the queue. Okay? So this is how you can batch or do multiple updates together. Remember, state updates in react for components are asynchronous in nature, and you need to make use of updata functions for multiple state updates. Now what updata functions, like I said, it's a simple arrow functions that you are passing. To the updater function over here. So this is the function that is being used to update the state. Okay? And you're passing the updater function here to update the value. All right. So I hope this was useful and I hope you have been able to follow along. 7. Navigating Arrays and Objects in React State Management: Hey, there. So in this video, we are going to build an application that is going to help us manage multiple counters, right? So when I say it is helping us manage multiple counters, you can add counters on the fly onto the page. You can even increment separate counters individually, okay? So let me show you. I have this counter over here, okay? And I can increment it one, two, three, four. This is counter one. Okay, I can add a counter the way I like. I have added five counters over here. I can increment the one depending on my choice. And you can see every counter is having its own count over here, okay? It's not overlapping in any way, and it has its own button that is listening to the event. And whenever you are clicking this particular button, the state corresponding to that particular counter is incremented, or the count corresponding to that particular counter is incremented and not the others. Okay? And you can add as many counters as you like depending on your need, okay, as long as you like. All right. You can even enhance this application to add a decrement button to add a step over here, okay? So with step, you can take a number, which will decide whether it should increment by one or what number it will increment Pi. Okay? So you can do that, and you can even add a button to delete the counter. So if you want to delete a specific counter, you can select it and delete it. So that's the enhancements that can be done, okay. But right now, this is what the example is going to be. It is a list of multiple counters put together. With its own count that is being displayed and its own increment pattern, which can help us increment the count of the respective counter. All right? Ready? So let's jump right in. So here, I'm in the application, and I have this file app dot JSX, wherein I have a couple of imports at the top, and I have this function or a functional component being created with export, and it is simply displaying hello right now, right? And you can see hello as the output over here. Okay? Now, the point that I want to demonstrate over here in this video is the point that I'm going to talk about is you can store arrays objects and even more complex data structures in a state. Okay? So state is just not limited to a normal variable. It's not like you can store a single value in a state, but you can have complex things like arrays, object, and even more. Okay? And that is what this example is going to be directed towards, okay? So if you take a look at the application that we are going to pild, okay, we need a list of counters, right? So with in app, what we are going to do is I'm going to create a state over here. Okay. So I'll say const. Okay. And instead of counter, I'm going to say counters over here, something like this, and I'm going to say set counters over here. Okay. And I'm going to say use State over here. Okay. And we need a initialization block over here, right? So I'll initialize this to default and default will be this over here. Okay? So I'm going to say ID, and ID will be one, and I'm going to say value and value is zero. Okay? So this variable or this state essentially is having the list of all the counters in the form of an array, and every counter over here is a key value pair. You can see this is one counter, okay, which is having its own ID and its own value. Okay? So this is counter one, and it's an object for counter one, and you're having an array of counters over here. You can say, this is holding an array of counters and a single counter is nothing but an object, which is having ID and value as its attribute. Okay? So that is how it will be maintained over here. I'll just take this to new lines so that it's visible on a single screen over here. Okay? So this is clear, okay why we are having this kind of thing. Okay? Now, the next thing that I want to add over here is a function, okay? I'll say const, add counters over here. Okay. And this is a function that will help us add new counters onto the interface, right? So it's an arrow function, and over here, going to add a semicolon, and I'll have the logic over here. Now, to add the counters, what we need to do is, okay? So let me take this array. So this is the array. Okay. Let me take this in one line. This is the counter, right? Now to add one more counter to it, what I need to do is, I need to take this entire thing. Okay? I need to say comma and I need to add this over here with the ID too. Right? This is how I'll add one more counter. If I need to add one more, what I'll do is I'll say comma, I'll add the same thing, and I'll convert this to three, right? So this is how I'm adding counters, right? Now, how can I implement this logic over here, right? So what I need to do is I need first the list of all the current objects that exist, okay? And I need to append one more object in the end whose ID is incremented by. I repeat. So the logic over here that I need to implement is have the list of all the current objects that exist for the counter, in the array, and then add one more object in the end whose ID is incremented by one. You can see, how would we do this? So I'll get rid of this over here. Okay, this thing. And what I need to do is, I need to call set counter first thing because we need to update this over here, right? So I'll say three dots. I'll make use of this spread operator. I'll say counters over here. Okay? So I'll spread the existing value of counters over here. Okay? I'm sorry, this needs to be in it's a function call, right? Over here. Okay. So first, I'll spread the existing value of counters, and then I'll say ID, colon, I'll say counters dot Length plus one over here. And I'll say value zero. So this would be my logic basically to add new counters. I hope this is making sense over here. Okay? So what we are doing is we have created a new arrow function called add counters, right? And we are calling set counters. Why are we calling set counters? Because it's the state update function for counters, right? Now, how do we update the state? What value we are updating it with? So whatever existing so we need to add an array. Okay? We need to add update the existing array with a new array. Okay? We need to update the existing array that it's holding. So this is the existing array, right, that is holding. It is having one object. What we need to do is we need to make the spread operator and get all the counters spread over here. Okay? And then we need to add one more in the end. We need to say ID is counters dot length plus one and value is zero. Okay. The moment we do this, it gets added to the existing list, and now counters is going to have two counters over here, one with ID one, and other one with ID two. And then if you call at counters again, what it's going to do is it's going to spread both over here and it's going to add the third one and so on. Okay? So I hope this logic is pretty clear. We're making use of spread operator over here and we are crafting a new array that is replacing itself with the existing one for counters. Ar? So this is done at counter. Now, what we need to do is we need to come over here. And I need to add a button. I need to update the Y here. I'll say button. I'll say on click. What should I call on click? I'll call add count over here, and I'll say, it's plural, so I'll say add count over here. Okay, like this and I'll say at counter, something like this. Okay. And I'll close this button over here. Okay. And we also need to display the counter, right? How do we display? So we'll display it as an unordered list, a simple unordered list using these HTML tags. Okay? And I'll say counters dot map. So we are making use of map over here. Okay. And here, I need to say counter. Okay, so for every element in the counters, I'm saying counter, this is I'm accepting this as a parameter and I'm having this basically, I'm having this arrow function over here. Okay? And what I would do over here is I would create a list over here. Okay, something like this. So Ali and I'll create a list. Okay. Now what this list is going to have, it's going to have a key. Of course, we need to add key so that the rendering is optimized. So it will have a unique ID, which is counter dot ID. Okay. And here, I need to display counter, and we can display counter dot ID. I need to have a UI, which says, Okay, so the UI I need to display is counter one, colon de value, and then it has a button here. Okay. Then it has a button. Oops. Then over here, there is a button. This is the UI that I want to have, right? So I have counter, and one is nothing but the ID, counter ID. I'll add a colon over here. Okay? I'll say counter dot value. Okay. I want to display the value because zero is the value. And then I need to have a button. Okay? So I'll add a button. I'll take it to the new line, and I'll say button. Okay. And on click, there has to be an on click event. All right. And on click. Okay, something like that. I need to link it to a function. Okay? It will be an increment counter function which does not exist yet. Okay, so I'll just have some empty thing over here. I'll just keep this empty. Okay? And here, I'll say increment increment. That is it. All right. And I need to get rid of this text over here. This is just for explanation purpose. I'll save this and let us see the UI. Are we able to see it? Yes. Are we able to add the counter? Let us try. You will see? Awesome, right? Increment won't work because we have not created that function. We are just calling a empty thing over here, right? So how this is working, how add counter is working. First, we are maintaining the counter this way. Okay? So if this is not clear, let me explain it to you, in a more clear way. Okay. I'll take every step over here to make sure you understand. Okay? So this is when counter count is one, okay? Counter. Count is one. Okay. When counter count is two, okay. Counter two. What will happen is when you add one counter, this gets updated too. So this gets updated to this thing. Okay. Is one more. This is ID two. Okay? When the counter becomes three, there are three counters, okay? Or 1 second. Let me say when one counter. Okay. I'll just copy this when two counter and when three count. So this is two counter, and this is three count. Okay? Now, when there is three counters, what you do is you add the third element over here. This is the third counter over here. This is how counters are being managed. Okay? I hope this is making sense. So this is when there is only one counter. Okay, so counter is represented. So counter can be represented by two things. One is the ID of the counter and other thing is the value. Okay? So initially we have one counter with ID one and value zero. That is what we have initialized it with, right? And what we are doing is we are rendering it, how we are entering it. So if you scroll down over here, okay? We are saying for every counter, make use of map method over here because we are making use of map over here because this is being stored in an array. It's an array of objects, right? Every counter is represented this way, right? Counter is represented this way. And to represent multiple counters, we are creating an array, right? This is an array. You can see the elements are being added. Okay? When three counters are three counters are added, you can see three elements are there, right? So we are saying counters dot map. Okay? For every counter, we need to display the counter ID. Sorry, we are not displaying the counter ID, but we are adding it to the key, and we're displaying the counter ID like this. Okay, we are seeing counter one and we are having the value being displayed. And on click, we need to perform the increment, which we are not doing right now. Okay? And when we say add so when we click this button, add counter over here. What is happening is this function is being called. What this function is doing is it is adding one element in this array. You can see over here, it is adding this element in the array, but it's making sure that ID is incremented by one. Okay? So how is it adding one element in the array? It is spreading the existing elements. It is creating a new element, new array by spreading the existing element and appending one new element in the end. So how is it crafting a new array? It is creating a new array over here by spreading the existing array and appending a new element in the array in the end and it is making sure that its ID is incremented by one. That is how it's doing it. Okay? So this is done. I'm not deleting this. I'm just having this in the form of comments. I think this is good for understanding purpose. If you are still confused, then, looking at this, everything should be cleared, right? Because this is how counter looks when there are three counters being created. This is how the state would look like. Okay. Now this is done. Now what I need to do is I need to have increment counter. Everything is done, right? Increment counter. So this is working fine if I refresh. It's initialized to one first, and if I add multiple counters, you can see the ID is also being incremented. Okay? So I'll come over here. What I would do is I would save here const. Okay? I'll say increment. Counter. Okay, increment counter, something like this over here. Okay. I'll have ID over here being passed and an arrow function. Oops, arrow functions, something like this, ending with a semicolon. Now, how can we increment the counter? So we have the ID of the counter, right? How do we get the ID? We're getting it over here, and we need to pass it over here. Okay? How do we pass it? So we can say over here. This is an arrow function, so I'll just remove this. I'll say increment counter. And I'll say counter dot ID, something like this. So we're passing the ID of the counter. So we know which counter is being incremented. Okay? Now, what we need to do is we need to search through this array, and we need to get the counter. Whose increment button is clicked or whose ID matches, and we need to increment the value and update the value to the incremented thing over here. Okay, so how do we do that? So what we need to do is Ala come over here. I'll first say counters dot map. Okay? And I'll perform a search over here. I'll go through the entire array over here. I'm going to say how I'm going to search, I'm going to say counter ID is equal to ID. Okay? And if it's equal, then what do we do? We increment. Okay, I need to add the logic for increment, else, you just have the counter over here. Okay? You don't make any change. That is how the logic would work. Okay? And also, the output of this should go to set counters because we need to update the state, right? So I'll add the entire thing to set counters. Okay? Now, how will the logic work over here? So what would be the increment logic over here? I would say, I would add a pair of curly braces. Okay? I would say spread the counter over here and update its value over here. Okay, I'll say counter value plus one. Okay? So what this is going to do is it is going to spread the current counter along with its attribute, and it is going to override the value over here, and it is going to increment the value by one. Okay? First, all the attributes are left as is. So first, it spreads the counter over here, and then it updates the value attribute of the counter with the new value. Okay? And that is what is returned. And if this is not a match, so this is executed only when it's true. If this is not a match, what happens is the current counter is being returned. Okay. I hope this is making sense. And then if I come over here, let us test this. If I grement you can see, it's working fine, right? You can see the entire application was not reloaded even after we added the function, okay? But only the relevant parts was reloaded because the counters are still there. The entire reloading, this is how the entire application reload looks like. Everything is reset. Right? So that was not done even though when we added a new function, right? So that's the beauty of react in states over here. So you can see this application is working as expected, okay? And I hope this is giving you a good gist of how you can have complex data structures like arrays, objects, and even more complex data structures in state. And here is how you can make use of it. Okay? It's a pretty decent example or a good example, I would say that helps you understand the power of states and how you can work with states to create wonders, I would say. All right. So I hope you have been able to follow along, and I hope you know, so this is some basic CSS that I have in place. Okay? It's not much, okay? But super basic stuff, like container styling, H one styling, input styling, border styling, sorry, button styling and hover styling. So simple CSS I have, which was already linked to this particular file. Okay? So I hope this was useful and I hope you have been able to follow along. 8. Project Spotlight: Managing Form Inputs with React’s useState Hook: Hey, there. So now it's time that we talk about how you can build a form using react and manage all the data with the help of state and use State Hook in components. All right? So this is what we are going to build. I actually have the Temo over here. And you can see there are different kinds of form elements that we are going to play around with. So first, you have a normal textbox. Okay, and you have a checkbox. You have radio buttons, you have select box, and you can see all the form data being updated live over here. Let me give you a demonstration. So whatever I enter over here or whatever I select will be displayed over here. Okay? So here, if I say, Hey, you can see this text up here over here. Okay, I can say, I love react, something like this. And you can see any sort of updates I make, those are also reflected in real time. I can select the radio buttons. You can see option one being displayed over here. If I switch to option two, you'll see Option two over here. Same goes for checkbox. I can see checked and unchecked and for the select as well. You can see option one, option two. Alright. So this is a form that is completely being managed by react with the help of U State Hook, and you can see how it is able to update one part of the application whenever there is a change in another part without refreshing the page. That's the beauty of react, right? So you can see how it's working. You can even if update anything at any point in time, you'll see the update being reflected without the page being refreshed or reloaded. All right. So we'll be building this hands on, and we'll be going through every step as to how you can build this. And this knowledge will be really helpful if you're planning to use react for, you know, building forms, dynamic forms with some robust validations. So here we are in the IDE, and this is the startup code that I have over here. It's a component called app component. Okay? The name is app itself. Residing in the file app dot JSX, linked to a CSS called app dot CSS, and the CSS file literally has nothing. All right. So we need to work on this. It is simply displaying one header over here or I should say, one heading called hello on the web page, alright? So we'll begin with this application. First thing first, what we are going to do is we are going to make use of use state over here, Alright. Be sure to import use state at the top, okay? I already have a imported. So we are going to make use of state. I'm going to say constant. I'm going to have a state created called form data, and I'll have a set form data. Function over here, and then I'm going to make use of us state like this, yeah, what is this going to be initialized to? That's interesting. So this is a object, basically, that will hold the entire forms data. So we have text over here, right? We have a checkbox, and the initialization of checkbox is false over here. We have a radio, which is being initialized to something empty or no data as such. This is also empty. And then we have over here, select something like this. Okay. Like so. So this is what the initial initialization. It is an object with these attributes. All right. Now what I will do is I'll start building in the form over here. Okay? So I have this H one. I'll change this I'll change the text to form example. Okay. I'll see if this. Okay. This is done. And here, then I'll have this class name as form container, something like this, form container. This will be helpful for CSS later on. I'm going to have a Fm tag, which is the HTML Fm tag. Okay. And now I'm going to start working on the elements one by one. So first element I'm going to have is text input, okay. And the next one I'm going to work on is the checkbox, something like this. Okay? So we'll first cover these two, and then we'll move on to the next. Alright? So yes, the textbox. What do we need to do for textbox or text input? A right? So I need to have it TIF first. Okay? I'm going to call this TIF as okay. Oops. Alright, I messed up with my keys over here, but this would be class name, okay? And I'll call this as form field over here. Okay. And this will go over to a new line. And form field, I'm going to have a label first. Okay. So the label is, what is the label, it will be text. We need to enter the text. You can add any sort of label like name or something like that if you wish to. Okay. Input field, it's an input field. What all attributes I need to set for this. So I'll first see this is of type text. Okay. Then the name is text over here. Okay? Name is text. Okay. 1 second, so I'll just press tab so that it's indented. Okay. Name is text. What is the value? So I need to link it to the value, and the value is over here, form data, tot text, something like this, okay? And then I need to have on change over here. Okay. On change, what should happen? We should call a function called handle change. Okay. Though this function is not yet defined, okay? So we need to define that function as well. I'll just have an empty function over here being created so that we don't land in any error. So I'll say const, handle change over here. Okay. And I'll have E being passed in. Okay. And I'll just have it empty. Okay. No problem whatsoever. Oops. So it's a syntax error. Yep, just looks good. All right? It's an arrow function, right? So I just have this handle change, and here, if you come, I'm linking it to handle change. All right? Now, whatever you are initializing it with, okay? Since you are linking this text box to the state over here, whatever you initialize text with, if I say ABC and if I save this, you'll see ABC being up here over here, right? Because that's the initialization, right? So I've kept it empty for now. Okay? But this is the DIV or this is the component, or this is the I should say, this is UI for text input. All right? Let's move on to the next after text input, we have checkbox. So let me copy the stiff, first of all. Oops. I'll have the stiff over here. Okay. It's a form field as well. It has label. Instead of input, I'll get rid of this input. Here, I can say, instead of label over here. Okay, so label will have how this checks box will work within over here, I'll have input. Okay. And over here, I'll say type is equal to Checkbox. Something like this, okay? Name, I'll say, checkbox. I'll keep the name and type same checked. Okay? This is a checked property, which I'll link it to form data. I'll say form data dot checkbox. Okay? This is done, and on change, I'll say handle change. So there is a single function that we have now, okay, to handle all the changes, right? And, yeah, I'll close it. It's a self closing tag input or you can have it separate closing as well. Okay? So this is done label, and here after input, probably you can have 1 second. So you can have checkbox. Something like this. And you can see the check box over here, right? So checkbox is done, okay? The form is not looking pretty. Don't worry about that because we don't have any sort of CSS yet, right? So now I'll have a comment. I'll say radio buttons. Okay? How do we work on radio buttons now? Okay? So we'll have to create a radio button, right? So I'll piece this. Okay? This is your structure, and I'll get rid of the input over here. Okay. Or what I can do is I'll stick to this input. We'll change the types. This is radio over here. Okay? And type over here for radio is radio. Copy this radio. Text is radio. Okay? Form data taught radio, the option four checked. So this won't be there. It will be checked over here. Okay? Type named, and I also need to add value over here, okay value. Value is equal to, I'll say option one. Okay, something like this. And I can say radio is equal to option one, okay? And on change, there is handle change. Okay? And here, I can say after input after label. Okay. So this is the label tag. Okay. Win okay, this is within input. So if I save this, okay, I'm seeing radio over here, but I need to add one more label, which is wrapping this, right? So I'll say label. And I'll close this, this closing will go after the input, and we need to have a label saying option one, something like this. Okay? So you can see option one over here. Okay? I'll duplicate the same thing entirely. In fact. Okay. And I'll scroll down over here. So after the label closing tag, another label opens, radio, and this is option two, and the radio option over here is two for this, and text is two. Okay. So this is it. Okay? I think this is looking good over here. Okay? There's no CSS, so don't worry about that. Okay. But these are our radio buttons. We have a couple of options. Okay? Now this is done. We have TIF, okay? And now what we need to do is 1 second. This is DIF over here for this. After this DIF, I'll add. Okay. What do we need to add drop down? Okay. Now for drop down, I need the TIF. Okay, so I'll scroll up. I'll copy this text input tip come down. Okay. And over here, I'll piece this. Okay? Now for drop down, what we need to do is we'll see over here, select. This is select. And instead of input. So we don't need to say input over here, we'll have select over here, right? And a label is there, but this will be select. So I can say we don't need this. This is very input specific, right? I'll just get rid of this and we'll say select. Something like this. Okay. And for select, we're going to have multiple options within Select. Okay? So this is option one. But for select, we need to set some properties. So I'll say name of select is equal to. What is the name? It's select. Okay. What is the value over here? So value is from data taught, select, something like this. What is on change? On change, it's handle change, right? So I'll say handle change over here. Okay. Now coming to options, we have option over here. Option value is equal to empty. No option. Okay. And the first option is about choose an option. Okay. So we'll display this at first. Okay, choose an option. Something like this. Okay, so you can see, choose an option, right? Now, I need to replicate this, okay, across. So I'll copy this and go in the end. You can paste this once and twice. All right. So this is done. Okay. Now, value for the next one is option one. Okay. And here you can have option one. And the value for two is option two. And here. Option two. Option two. All right. So this is done. You have option one and option two coming in. All right, so this is done. Now we need what we need is we need a checkbox or I believe checkbox is already added drop down, radio button checkbox. So this is done. Now what we need to do is we need to display all the data as well, right? So here, after the last or before the last if, I should say. Okay, here, I'll add a TV. Okay. This is the DF and I'll call this. I'll add a class name over here. Class name as that of form data. Okay. And over here, I'll say H three. Oops, H three, it should be H three. I'm sorry. So this is H three over here. Okay. And I'll say form data, something like this. Okay. Now we'll display the form data one by one. Okay? So how are we going to display? First, we'll have a P tag. Okay? Within P tag, we'll have strong tag. Okay, strong. Within strong, we'll say text. So we'll display everything one by one. So we'll say text. Okay. And here outside strong, I'll say form theta. I'll have this Ja script. I'll say form theta. Tita over here. Dot text. Okay. And if this is not there, then I'll say in A in A. Okay. Okay. So this is done. This is how we are displaying like how the display would work. You can see. Okay, Fm data dot text or N. So if Fm data dot text is nothing, then NA is being displayed. And we need to do this for all, o we'll come over here. We'll replicate this for radio radio and we'll see formdata dot Radio over here. Otherwise, this will be Okay, so for radio, this won't work or this will work. It won't work for checkboxes. Okay? So I'll add for checkbox over here. Okay? This is for check. Box over here. So for checkbox, we need to take special care. Okay? Because if form data or checkbox is true, then we need to display checked and unchecked, right? So I'll say question mark, else, false conditions. I'm making use of tonery operate over here. I'll say checked and unchecked. Something like this. All right. Radio is done. We have select. Okay, so I'll see select something like this. And here, I'll see select. Okay. This is done. Okay. We are displaying the data, also we have the view for displaying the data. All right. Now, what we need to do is we need to implement the most important function over here, which is for on handling the change. So I'll scroll up over here. Okay? We are getting E over here, which is the event. So I'll say const, and I'll say name will have value, we have type, and we'll have checked over here. Okay, so this is what we are creating and I'll say E dot target over here. Okay. Now, over here, what we need to do is after creating this, we need to set the form. Okay? So I'll say set form data. So essentially, what I did over here is in the line number one, I've de structured the E dot target over here. I've de structured it into individual elements, and I'm saying set dot form data. Okay. I'll craft this new object over here, okay? And I'll say three times form data, so I'll make use of I'm doing destructuring over here. Okay. Hm data, comma, and for name, what I would do is if name type is equal to checkbox, right? So we need to have the checked value, right? So I'll say checked colon value. Like this. Okay? This is done, and, yeah, this is also done. If I save this, let us see what the output is. So you can see the thing is being updated, checkbox checked and checked. Option one, Option two, and you can see option one, Option two being reflected. So it's working absolutely fine, right? We are able to make use of on handle change to update the form data. Okay? So we are restructuring the form data over here, whatever form data is being whatever form data exists over here. Okay? And then what we are doing is we're updating the values. So the application is working fine. What we would do is we would simply beautify it a bit. All right. So a little bit of beautification is important. Okay, so that it looks a bit more presentable. So I'll start with, with some CSS over here for the form container, okay, I'll have max width as 400 pixels over here. Okay. I have margin over here, which I'll set to 50 pixels and auto. I'll pass in these two things. Okay. I'll have padding over here. Padding, let's set to 20 pixels. Okay? Border radius. Okay. The border radius, I'll set to eight pixels. Probably. Let's see. Okay. And I'll see background color. Okay. Macron color can be, let's say, white, sort of a thing. Okay, sure. Abded as sure. All right. You can choose the way you want. Okay. I'll have box shadow over here to zero, zero, ten pixels Rch PA, and I'll set the value over here to zero, zero, Okay, zero, zero. One. So this is what I'm setting it to. All right. And yeah, this is it. I guess font family weekend, okay? If you need font family, and I'll say sensif over here. All right. This form container, H two and H three tags will have a textile line of center over here and color as that of grey. Okay, something like this, probably. Okay, or color of dark. A. Depending on your choice, okay, or you can simply set it to black over here. Okay. This is also good. Okay, h2h3. Okay, now this is done. I'll have form field. So all the form fields. Okay. How do we do? So we'll have margin bottom over here. I'll set the margin bottom to 20 pixels. Okay, save it. And yeah, this is it. Let me come back to this if needed later. Label. So I'll say display of lock over here for labels. Okay, you can see, change in the UI. I'll say font size. Font size is 14 pixels. Okay. I'll have weight over here. Weight of pulse over here, okay? And then I'll say, margin bottom. Margin bottom of five over here. Okay. And color. Let's keep color as hash three, three. Okay. Yep, we're done. For label, I'll say input, and I'll have to type as text over here. Okay. So type is equal to text. Okay? Something like this. Okay. Now for text, what I will do is I'll say width of 100%. Okay, this is it, first thing. Now I'll have padding over here of ten pixels. Okay. I'll also add select also to the CSS. Select. Okay. And then I'll say border. Oops. So it will be a semicolon border. Now for border, I'll say one pixels, solid, hastac CCC. Okay? It's a white sort of grey sort of color code, ok and radius. Four pixels over here. Okay. And font size of 16 pixels. Like so. Okay? This is looking okay. All right. If you take a look at the app, it's looking okay. Not bad. Okay. Let us work on this further. So I have this input for I have the CSS for text. Let's add some CSS for checkbox as well. So I'll say checkbox. Okay. And I'll say margin right. Okay. Margin right. Let's add it ten pixels. Let's see. Okay. And for radio also, I'll add some for radio. For radio, I'll just add margin over here five pixels. Okay, a little bit of alignment over here. Okay. And now let's align the form data, so I'll say form data. Form data is D class for the data that is being displayed at the bottom. Okay, so I'll say margin bottom. Margin top, I'll start with 30 pixels. We have some room there. We get some room, and padding. Oops, padding of let's say ten pixels over here. Okay. I'll add color background color. Okay, background color is we can keep background color as something. I have a color code actually, okay? It's E nine, f7f9, something like this. It's white sort of a color. You can see this and the outer color is not good in that sense. So what I will do is I'll take this color and probably CCC or if I scroll up at the top over here. This is a shore. This is not good. So I can change this to F nine of nine I nine. Okay. So maybe this is looking okay, okay? So this is grayish, and this is bluish. Okay. So yeah, that's what the styling that I'm using now. And background color, I have border as well. Border of one pixel, solid. Okay. And hash, I have a color code A three, D two, D six. You can use the color code or you can choose something resembling, depending on your preference. It's blue sort of color scheme that I'm using. Okay, SN blue. I'll add boarder radius of four pixels and a ten. Okay. I'll say form data, P tags. Okay. What do we do to P tax? I'll say font size of 16 pixels. Okay? Let us see color color, I'll say hash 555. This is done? Okay. Strong. So when you say strong, okay, I'll say color of 333. Okay. I think this is looking decent. Okay? Let us add something for I think this is done. Okay? Nothing else is needed. I guess. Yep. I think this is looking decent. Okay? So the application is working fine, you can see. All right. And CSS is also looking decent. If you want to improve more, improvise more, you can absolutely do it. Okay. But yeah, this is very much presentable. And whatever you type in, you can see how it's being updated. Okay? So yeah, this is how we can manage the form data. We're making use of one state over here, okay, which is having an object with all the attributes. Now you have more fields being added to this form, you have more attributes being added, and you can manage them in the same way. All right. I hope this has been useful, insightful and helpful as well. Oh 9. PROJECT: Build a Custom Color Picker with React: Hey, there. Now it's time that we begin building a project, which is a color pickup application using react has. Now, this will help us reinforce a lot of react concepts and help us practice a lot, all right? This could also be a great portfolio project to showcase in interviews and resume, right? This is the application. Here you can see a few color tiles that you can select. And the moment you select any of the color tiles, you will see the color switch this way, right? And additionally, apart from this, if you want to add any other color, you can select over here and you can, like, get the color changed, right? So this is completely dynamic, you can see. The way or the moment I'm dragging the slider, you'll see everything being changed, right? So it's very dynamic, okay. In that way, you can see, it's very dynamic, right? So this is the color picker that we are going to pelt, okay? And this is going to help us practice a lot of react concepts, right? So without further ado, let's jump right into the editor and let's get started. All right. So here we are in the coding editor, and here to begin with, I have a basic React tap setup with app dot GSX returning this markup over here that you see, and here you see the output, which is color picker. So there's literally nothing in the project right now. We're just like returning H one tag that is giving the output as color picker header, right? Now we need to start building the application. So we will begin with these states. All right. And at the top, I'm already imputing stage hook. All right. So what I need to do is I need to create a state, and the thing that I need to keep track of is, of course, you must have guessed it by now, it's background color, right? Because that is what we are playing around with, right, in this application. Okay? So background color over here. And I'm going to say set background color, okay? So background color, something like this. Okay. And yeah, this is done. And then I need to have used over here. So I'll say use state, and I'll have a default color initialize. So the default color can be white, okay? And then I can save. Okay? So this is done. We have the State set. I'll add a semicolon in the end. Okay. Now what I need to do is I need to add an interface over here to show the tiles basically of color, right? And those would be the tiles basically that user can click on and get the background color changed at instance, right? So what I'm going to do is I'm going to add a array over here. I can see colors over here, and it can be an empty array right now. Okay. I'll shortly add some colors over here. Okay. But we also need to render the array, right? So whatever colors we are seeing, we need to render it, and we have an array. Okay? So what I'm going to do is I'm going to add etev over here. I am going to add class name to this diff so that I can add CSS later on, and I'll call this as color palette, something like this. Okay. Now here, I'm going to say colors Tat map. I'm going to make use of map over here, map method, and I'm going to say color, ma index. Okay? The these two things we are going to make use of. Okay? Make use of arrow functions, and here we are. Okay. So within this, whatever you add would be implemented for every element in the array. Okay? And what we want to do every element in the array, we want to display it, right? So I'm going to add a TeV over here. Oops. So I'll add a TeV something like this. And, why didn't it close itself? Okay. So I'll close it manually. All right. So here we are here we have TV, okay? And I'll add a key, something like this. Okay. 1 second. So I'll say key is equal to, and I'll say index. Okay. And class name. And I'll say box. I'll just add our CSS over here. Sorry, class name over here so that I can add CSS later on. Okay? And I can say on click over here. So on click I need to, of course, so on click, there was an interaction, o? And I need to add an interaction. The interaction will be that the background color should change on click, right? And I need a function for that, which we don't have right now, which is absolutely okay. So I'll just leave this as empty. Right? Now, this is done. Okay? We have this day. We have this over here. Okay? And what I need to do is I'll scroll up over here. We can add some colors over here in the array. Okay? Now, what colors should we add? Okay, I do have some color codes, so I'm going to type them manually. Okay? So I can say FF, zero, zero, zero, zero, Okay? Let me save this, and we are not seeing any change over here. Okay. Okay, we are not seeing any change because we are actually, I'm just rendering the tap over here, key color name, and I'm just showing the click over here. So I'm not seeing anything because, okay, there's nothing in the dev, but what I will do over here is since the class name for this is color box over here, I'll just add a width over here of 50, let's say, okay? And I'll add a height over here of 50 pixels. I'll save this over here. Okay. And so we're not seeing the output yet. What we need to do is I'll scroll over here and let me see. Okay, so there is one mistake that I've made. This shouldn't be curly pase over here. Okay? This should be italy round bracket. Okay. And I'll just take this round bracket and I'll replace it with this curly paese. Okay. So this entire thing, the div thing should be within round bracket over here. And if I save this, I won't see anything yet, but there is a div added, okay? We need to just add background color to this div. So I'll say style, okay. So style of background color. Here, something like this, Colin color. Okay. Like so. Now you'll see the DIF being shown over here. Okay? So what is happening is, I'll tell you, so this is the colord. This is the color code for red. Okay? If you Google this, you'll know what this color code is. And what I'm doing is I'm taking this color. Or all the elements in the array, I'm iterating through it, okay, using this color dot map. Okay? And I'm accepting these two parameters in this arrow function, color and index, right? Now for every element in the array, I'm getting color and it's index. Okay? What I'm doing is I'm saying render a TiVo whose key is index. This I'm doing for optimization, like better rendering purpose for react. I have a class name, and using this class name, I'm setting the width and height as 50 pixels so that it's visible because there's literally nothing in the DIV and then I'm setting the style over here to the color value that we have over here. So this is what will be set. And then I have a on click event listener, which I haven't handled yet, okay? You can say, I don't have a function defined for that, okay? So I've done this, okay, and this is it. What we need to do is I'll grab a few color codes that I have and I'll paste it over here. So I'll paste it over here, and you can see it's a long array. Okay? You can add your own color codes or you can refer to this one. So if you Google over here, color code, and you can search for this one, you'll see this is the color code, okay? And you can go to this website like colorhx.com, and you can get any sort of color code you want to, okay? So color names. So here you can see absolute zero. You have the list of all the colors along with their color codes. So you can pick the ones that you want to display or you can take mine. Okay? That's absolutely fine. Okay. But I'm just showing you way as to how you can get your own color codes as well. Okay? So I've added this, and I'll save this. So the moment I save it, you'll see like all the color codes being displayed over. So as of now, you're just seeing these buttons. Okay? There's no styling. Nothing happens if you click on this, right? It's just there. Okay. Now what I will do is I'll write a function to handle the click. So I'll say const, I'll say handle color change. Now I'm calling this handle color change for a reason. Why? Because on click of this DIV the color should change for the entire page, right? So that is why I'm saying this. I'll say color over here. Okay. And here, what I will do is, I'll say set background color. Okay, and I'll pass in color, something like this. Okay. And I'll lend this. Okay. And now what I will do is, I'll come down over here. And what we need to do is here, instead of having an empty arrow over here, I'm going to say handle color change, and I'll pass in the color. Okay? So what the function does is the function actually will change the background color or whatever color you are passing in over here. I'm doing that. If I select blue now. Okay, so it doesn't work. Let me see what the issue is. Okay on click, I'm saying everything correct. Okay here, handle color change. I'm passing in the color as well. Okay, I'm closing in the div. Okay, I understood the issue over here. Here we are just updating the state, right? This is function we called to update the state over here. So background color has the updated value of color, right? Now, what you need to do, you are not yet setting it into the background of the TIF or the page. So what you need to do over here is we'll come over here, okay? DV class name, color palette. Okay, not this one, we'll add it to the parent div over here. Okay? So here, what I will do is in the root DV I'll say style, okay? And what is the style? Style is background color. Okay. So here we have background color. Let us see how this works. So you can see the background color is changing now, right? You can see. So yeah, this is what it is. Okay. The functionality is working fine. Okay. And what I will do over here is I'll add a class name also so that I can make use of it later on. All right. I'll say app. We'll use this class in CSS. Okay. But for now, I hope you have a clarity as to how the color change is working. Okay? This is done. Now, what do we need to do next? What do we do next? Next is we need to have a custom color picker as well. So if a user wants to select any other color apart from the ones that are available over here, what I would do is I would add a custom color picker, so I'll say TiVo. And over here, I'll say class name. Okay, you'll add a class name. Class name can be custom color picker. Something like this. Okay. Now over here, you'll have input. Okay. We'll be accepting input over here. So I'll say type. Type as color. All right. And then here, value. So what is the value? The value can be background color. Okay? Now, background color is a state. Remember that we have wherein we are maintaining the state of the background color, and we are updating it from these tips also on click. Okay? So we are assigning the value that is there in the background color to this color picker. Okay? And what we need to do is on change. Okay, we need to have an event. If anything changes over here, I'm accepting E, o and I'll say handle color change, and I'll pass in E dot target dot value. Something like this. Okay. This is done, I'll save this, and we'll see a color pick over here. You can see it's not beautifully styled. Don't worry about it, but you can see the dynamicity over here. This is react, right? So we're making use of state over here, the concept of state to bring in a dynamic feel into our background, okay? And you can see how this is working. Okay, it's not looking beautiful right now, I'll tell you. So if you go over here, this is a full page application, it's not looking beautiful. Right, it's not beautiful, of course, because there's no CSS, literally, right? So we need to add CSS to beautify it a bit. But yeah, I hope you guys get a sense of what's happening. All right. Now what we will do is we'll add some CSS, okay? So I'll start in the CSS file. Just make sure that the CSS file is linked over here, and it's imported over here. Import dot slash app dot CSS. And make sure to have this file in the same folder. If it's not there in the same folder, be sure to have the right path. Okay? It's in the same folder, so I'm referring it to as dot forward slash app dot CSS. Okay? Now here, what we need to do is we'll see dot app Okay. And I'll say font family. Like so. And I'll say al this one. Okay? And in the end, there was a semicolon. I can say textine right? And I'll say center. Let me see if this. Okay? So changes I could see, some good changes. All right. And now I can see padding. Okay? Padding, we can add of 50 pixels. Or let me keep padding of zero pixels away. Okay, let's see what happens. I'll say minimum height of 100. Okay. And then I'll say color. Okay, so color, let us add. I have a color code has F 0f0f0, something like this. It looks like a white color or light text for dark mode is what you can say. All right. So this is done. We'll keep the CSS for app this way. I'll have H one. Okay? And I'll say color. Okay. So color, I'll keep this one the same. Okay. This looks cool. I think we are all good. Okay? Now, let's add the CSS for color palette. I'll say color palette, something like this. And here, I'll say display flex. I'll add a display of flex. You can see how it became horizontal. Okay? The moment we added this property. I'll say justify content to center. Save this. Okay. And I'll say gap of ten, ten pixels. So every element will be spaced at the distance of ten pixels. I've not saved this change. But here, if you see, there's no spacing in between, right? It's working fine, but there's no spacing in between. So I want to add some space. So I've added this gap ten pixels. The file is not saved yet. The moment I save, you'll see how changed, right? And if you see over here, you can see ten pixels, right? This is working fine. Okay. So here gap of ten pixels, and now I'll say margin, margin of top over here. Say zero pixel. Okay, ten pixels. Sorry. Not zero. This is okay. All right. And color box, we have 50 pixels, 50 pixels. I'll say cursor pointer. Coso will keep two pointer, and I'll say border. Okay, border two pixels, solid, and I'll say hash FF. Okay. So this is it and let us see if this. Okay. So we have some bottle and we have this hover effect, which is looking decent, I would say. All right. Now, we need to style the color pika input as well. This is not looking that good, right? So I'll say tot, and I'll say custom color Pica. Okay. Once again, is this a class that we have? Let me scroll down. Okay, yeah. This is a class I remember. It's custom color picker. And within this we have input, right? So I'll say custom color picker over here. Okay. And within this, we need to add, let's say, margin. So right now there's literally no margin between these buttons and the color picker. So I'll say, let's add a margin of 20 pixels like this. Okay, there's some gap now. Now what I can do is I'll copy this. Here we'll add the CSS for input as well within this. Okay? So I'll say for this, get rid of this. We don't need margin top, so I'll say cursor pointer. Okay, this is done. I'll say border as none. Okay. We don't need any sort of bottles, so you can see this looks cool. Padding, not that cool, we need to add some padding ten pixels, okay? And we'll add radius poder radius. Let's add a poder radius of five pixels. Okay. And we can add color over here. Lef. Okay? This is done. I think this is it, and we need to add hover effect. So I'll say custom color picker, input, colon hover. Okay? Now, what is the hover, I'll say background color of 55. Like so. Okay? So far so good. Okay. Now, if you come over here, this is a full page application, you'll see how it's displaying the color and here also, you can change this, right? Now, if for any reason, if you're not liking these white patch beside the entire div where you are rendering this ala pica. This entire thing is being rendered in the ala pico and there is this white patch. This white patch, we have not added. What you can do is here, if you want to reset the default styles, what you can do is you can add star here. You can say margin, margin zero, and I'll say padding zero. Okay, let us save this and see. Okay, you can see it went away, right? So yeah, this is working absolutely fine. If you want, you can add a sort of a sort of cap over here at the top above color picker. So you can come to the code base over here and here, if you see, we have this app over here, right? So this app, what you can do is within this app, we have C picker. So here, if you come with an app, you can add a padding over here of 40 pixels like this. And if you save the file, you'll have a decent padding at the top, and you can play around with this. Okay? So this is looking decent and pretty good. You can play around with the colo picker here like this. Okay you can see how it's how it's changing the color, right? So yeah, that's about the color picker, and this color picker has helped us reinforce the concept of states and how states can play a vital role in react components. And you can see how it is changing the background color, essentially. It's changing the UY without you even refreshing the page. So this is really, really good, and this is the reason why I love react. All right? I hope you've been able to follow along, and I hope this was useful. 10. Getting Started with useEffect: Hey, there. So now it's time that we begin talking about the use effect hook in react. Now, what is use effect hook? Okay? So here, I have a new react project with some commented code, which is going to help us understand this concept, and then we'll also do the practical to understand this even better. So to put it simply use effect hook in react lets you run some code automatically when something changes or when a component loads. Okay? Now, when I say component loads, it means that component renders for the first time or it mounts, all right? So there might be several kinds of things that you want to do or you might want to run or you might want to do something when something changes in the application or when a component loads, okay? So it's like setting a task to happen after the screen updates or when a certain kind of data is ready, okay? Now, if you search online about use effect, a common definition that you'll find is use effect hook in react lets you perform side effects in functional components. Okay? You'll see this term side effects. Now, what this means is it runs after the component renders, and it can be used for tasks like fetching data, updating the dome or setting up any sort of subscriptions if you want to. Okay? Now, these tasks that are important, but they are not directly related to rendering, okay? They are known as side effects, okay? And that is also what I'm talking about over here. Use Effect Hook in react lets you run code automatically when something changes or when a component loads. Okay? Now, after the component loads, you might want to fetch some sort of data from the API, right? Or you might want to fetch the data from the API when something changes into the application, right? For example, a state is updated, right? So you might want to fetch the new data from the server. So in that case, you can make use of use effect hook. And this fetching of data is also known as side effect, right? So it's basically a task that you need to do after your main task, right? So that's what use effect hook hook is to put it really simple. Okay. And here is a syntax over here. Okay? This is the syntax, you can see. So I have use effect, okay? And within these brackets, okay? So 1 second. I'll just cut this over here. I'm making use of use effect this way. I need to import this at the top whenever I'm using it, and if I paste it over here, I have this function inside. So this is a function you can see, the selected part. And this basically consists of the code that you want to run as the side effect, right, or the action that you want to perform, this is being passed as the arrow function as you can see over here. Okay. Now, this code can be anything like making an EPA call, like I said, or updating any sort of subscription or any sort of thing that you want to do, right? And over here, you have array for dependency. Okay? Now, what this means is, this is the dependency, okay? That is that basically is being watched, okay? And whenever there is any change in this dependency, this code is executed. That is how it works, right? So here, if you see the definition said, Use effect hook in react lets you run sum code automatically, which is this code, it is this code that you mentioned over here, right? So this is that sum code, which it lets you run automatically when something changes or when a component loads. Okay? When something changes, so what is that over here? So that's the dependency that we are talking about. Okay? So when this dependency changes, if you have specified a dependency, of course, this is optional. If you've specified a dependency, then this code will run whenever there is any change in dependency. And here you can see, these are different variations of use effect hook in which it can be used. This is the first one. Okay. Now over here, there is no dependency array. You can see there is no dependency array. If I want to specify, I can specify the dependency array like this, but there's no dependency array over here. So without the dependency array or without specifying any sort of dependency, this would run on every render. So whenever there is any sort of rendering that is done, this code that you specify within this arrow function would run. Okay. And this is another variation where you have a dependency array. Okay? You can specify comma separated values over here. Sorry, this is not the one with the dependency array. This is the one with the empty dependency array. Okay. So I have the third one with the dependency added. Okay. What happens if you have an empty dependency array? So it runs only after the initial render. So when the component mounts or it renders for the first time, that is the only time when this would run. Okay. And this is a third variation that we have over here, wherein we have count. Okay? Now, count is the dependency based on which this code will be executed. So if there is any sort of update over here in the count, okay, this would be executed, right? That is what it means, okay? And it runs on initial render as well, and when the count changes, that is what it means. Okay? So I hope this is pretty clear from the theory standpoint, right, to put it simply use effect Hk. Okay, this is the simplest definition that I could have use effect hook and react, lets you run some code automatically when something changes or when a component would load. All right? So that's use effect hook for you. Now, before using use effect hook, what I'm going to do over here is a scroll down, and over here, let us have an example without use effect hook first. Okay? So here in this particular application, I just have this normal header that I'm returning and you can see this output on the screen here, effect hook, okay? What I'm going to do is I'm going to create a count over here, of course, I'm going to make use of use State hook over here. Okay? And I'm going to say count over here and I'm going to say set count, which is the sea, and I'm going to say use state over here and I'll initialize it to zero. Okay? Now, what I'm going to do the next thing over here is I'm going to have increment count, okay. And over here, I'm going to say this is an arrow function. Over here. Okay. And what I'm going to do is when this function is called, I'm going to update the count over here, okay? So I'm going to say count plus one, something like this. Okay. I'm also going to update the title, okay? So document. Title is equal to, and I'll have the template literals over here. I'll say count. So inside backticks, I have count, and I'll say taller, and I'll say count plus one, something like this. Okay? We're not making use of this function yet. Okay? We need to make use of it. So here, I'll come in, and over here, I'm going to add a button. Okay? So this is simple button. Okay? And what it does is it says increment over here. Okay. And here on the side, it has on click something like this, and I'll say increment count. I'll save this. Okay? So this is a button that I have, okay, and you can see over here. The title says what plus react, right? So I can say increment and it is updating the title, right? You can see the count is being updated, right? In the title, you can see. Right. So this is an example without use effect hook. And every time the button is clicked, the increment function directly updates the document title. This works, but this is not ideal because it's hard to manage and maintain, especially when the app grows. This is without use effect hook, right? Now we can transition this example into use effect hook and how would we do that? So what I would do is I would say, Oh, let me I'll have this over here, okay? And I'll scroll up, okay. And over here, I'm going to say use effect. The moment I say use effect like this, okay? And if I press Enter, let us scroll up and see if the input has been added. So the input has been added, you can see over here at the top, along with use state. And if you scroll down, choose effect, I need to make use of T syntax so I can even copy it. So I want to use the one with the dependency, right? So I'll just take this one over here. Okay. And what I would do is over here, I can have the code, o within this. So the side effect over here is this code, right? So I'll just cut this and I'll move it to this particular function over here. Okay. So I have the increment count separate, and this is a use effect hook that is executed, okay? Oops. So this pop up comes in. Okay. So this use effect hook is executed, Okay? When the count is updated, any changes in the count will trigger this code to execute, right? And what is this code doing? This is updating the document title. Okay? What is the main task? Main task was just to update the count with this function. And after updating the count, we have a use effect hook, which is making sure of running some additional code once the changes have been made to count. All right. I hope this is making sense. So I'll save this over here, and I'll refresh. Okay. Now you can see here, you're seeing count Colin one, right? We have not even clicked the button yet. It's saying count Colin one. All right. Whereas in the previous example, so I'll just cut this, I'll or I'll just copy this, okay? I'll just comment this out, and I'll just go back to the previous example. So this is our previous example. In the previous example, when we did not press the button, we had Wt plus react, which is the default title over here. We are not seeing count plus one over here because the title is set, of course, when the button is clicked, right? So when I click the button, it's updated to count one, count two, and so on, right? But in this case, over here, okay? Let me just to control. So. In this case over here, okay? So I'll have the count over here, the count plus one. Okay. So in this case over here, I see count zero. Right? Why is this zero? Why am I seeing it updated in the title? Because if you see over here, it will run. If you're making use of dependencies over here, it runs on initial render and when the count changes. So it's already running on initial render. But this was not the case. So this thing when this was in the function and this was commented out, or did not exist. At that time, it was not running on the initial render. You can see, it's not running on the initial render. And whenever you clicked, it showed the update over here, right? So yeah, that's the thing over here right now. So this explains that this runs on the first random, right? So if I save this F count zero, and I can increment this, okay, as many times I want, and you'll see the update to title happening. And this is tied basically to count. An changes in the count will trigger this code over here, okay? This code that I've written. Okay. This code will be triggered, right? And, yeah, this is all because of the dependency array. So dependency array ensures that this is just triggered when the count is updated and at any other times. All right. So I hope use effect hook is pretty clear to you all as to what it is and how it works. So to put it simply Use effect hook and react lets you run code automatically when something changes or when a component loads, right? It's like setting a task to happen after the screen updates or when a certain kind of data is ready, right? Now, what this means is when certain kind of data is ready, you might be performing some sort of processing, right? And you might be assigning that process data to a state. You can have a use effect hook tied up to that state. And whenever the data is ready and it's assigned to that state variable, the use effect is strict, right? So that's what it means when you say when certain data is ready, right? And over here, you have these different variations of use effect, and this is the syntax, the main syntax. All right. I hope this has been useful and I hope you have been able to follow along. 11. Demystifying Dependency Arrays: Controlling useEffect’s Behavior: Hey, there. Welcome. And we're going to take a look at the importance of dependency array in the use effect hook, right? So let's take a look at this example. So here in this example, I have a very simple reactive project, and within the app JSX, I have this app component wherein I'm simply returning a dif with a header and a button click. What button click is doing is it is updating the state. Of course, we have a state called count over here with the help of use state, and we are making use of use effect hook, wherein if there is any change in the count, we are updating the document title. All right. So this is what the code is. It's pretty straightforward, and I'm rendering this component here in main dot GSX as you can see, Allright? So what I would do is I overhead over to app dot JSX, and our goal is to understand the importance of the dependency array that we have. So this is the dependency array that we have. All right? Now, now, the first thing, okay, what I would do is this dependency array is directly tied up to how the use effect hook is executed or how many times is it executed and when is it executed. So to track that, what I will do is I'll say Console dot Log over here, ok. And I'll simply have a message over here. I'll say use effect. Triggered, something like this. All right. And I can get rid of this. I I don't want to update the title. Okay? I'll just stick to Console lock over here. Okay? I'll save this and we can see the locks over here in inspect. Okay? So I'll go to inspect, I'll go to Console and you'll see U's Effect has been triggered. All right? NiFi refresh, you'll see, okay, it's being triggered twice over here. Okay? It should be idely triggered once. Okay. Now I'll tell you what's happening. So Jos effect hook with a dependency array is triggered once when the component is mounted and when there is any change in the dependency array. Okay? So right now it is being triggered when the component is mounted. Okay? There's no change in the dependency array value over here. So we are not updating the count on refresh, right? So it's just being rendered for once only, but we are seeing console dot log twice over here, okay? And this is because we are in development mode. And when you are in development mode over here, we are actually running this react application in the strict mode over here, if you see. So if you go to main dot JSX in the project, I'm actually running this in the strict Okay. Now if you don't want to see this twice, okay, what you can do is you can just get rid of this strict mode over here. Strict mode is although recommended when you are in development mode, because it checks for potential issues and any sort of unsafe code practices when you are in development. Okay? But we were seeing the message twice because the react was running in strict mode. And once I get rid of this, if I save this, you'll see I see it only once. Okay? So you can see use effect hook is triggered once, right? Now what we can do is here, we'll play around a pet with the use effect. All right? Now, if I say increment, you'll see it's being triggered every time I'm clicking increment. And why is this happening? Okay? This is happening because this effect is tied up to count over here. And whenever there are any sort of changes in the count, whether it's increment, decrement, I'm making any sort of change in count, this code is going to trigger, right? And that is what we are saying over here. All right? Now, what we can do is we will get rid of this. Okay. Now what is going to happen? Okay? So I'll do it refresh, and I'll clear the console, okay? So I'll do it refresh. It's triggered for the first time when the component is mounted, of course, right? Ni fight click increment, it is going to be triggered every time. Okay? But now you'll see the output is sm for having a dependency array and without a dependency a So what's the difference, okay? The difference over here is without a dependency array, it will be triggered on any sort of change or any sort of rendering on the component, right, or any sort of re rendering on the component. But with dependency array, it will be triggered only when count is updated. All right. So let me show this to you. Okay? And to demonstrate this, what I'm going to do is I'm going to introduce one more state variable. I'm going to call this another value over here, okay? And I'll say set another value like this. Okay. And I'll say use state over here, and this can be, let's say, or I'll just set this to ten, okay? Let's see what happens. All right. And here, I'll come down. I'll duplicate this button over here at the bottom. Okay? And what I'll do is I'll call this another value. Something like this. Okay. So we have one more button. But instead of updating the count, I'll update another value over here. All right. And I'll say another value plus one, right? So this is done, all right. This is something that we are doing. All right. Now let us see the importance of dependency array. All right? I've saved this. Okay. Let me refresh. So you can see Use effect hook is triggered, o when the component renders for the first time or the component mounts. Now if I say increment, it is going to trigger every time I click the increment. That's of course, right? But if I click another value, it is not going to trigger. Why? Why? So the answer for this is because it's tied up to the value change in count state, right, and not in another value. And that's why it's not being triggered. Okay? Now, if I get rid of count over here, Okay. Now if I refresh, you'll see it being triggered once on component load. If I say increment, it is being triggered. If I say another value, it is being triggered again. Okay? You can see. So it's being rendered for any sort of change on the component. And this is because there's no dependency array, right? There's no dependency array. Okay? Now, let us say if I add an empty dependency array. So let me add an empty dependency array. So what would happen? If I refresh, it gets triggered for the first time here, you can see, now, any sort of change, it won't be triggered because empty dependency array makes sure that the component is rendered or the use effect is triggered. I'm sorry, use effect is triggered just for the first time when the component is mounted. Okay? So I hope you have some decent clarity, okay? And I hope you can see how this dependency array makes a lot of difference, okay? So if you are performing any sort of operation over here, that's a little bit heavy, okay? Is a semicolon here. I've just added that. So if you are performing any sort of operations that is a little bit heavy and time consuming over here within this use effect hook, then this dependency array can decide the performance. Okay? So you have to make sure that you are making sure you have to make sure that this use effect hook is executed only at the right time when you actually needed to run. Okay. If for some reason, you have a long task over here, let's say, a high processing task, and if you miss the dependency array, then it's going to give you a really bad performance, okay? But let's say if you have a variable, okay, and you want to monitor the changes in that variable, and if you want to do this particular action only when there is the change in that particular variable, in that case, you should include or link this to that particular variable, and you should add that variable, state variable, whatever it is, over here in the dependency array. And whenever there is any change, the use effect hook will be triggered only ten. Now there will be some scenarios wherein you might want to do some sort of housekeeping when the component is loaded for the first time, right? So you can have use effect hook in that case with an empty dependency array, because you are you want to do that housekeeping task just when the component is loaded and not after that. So you can have an empty dependency area for that. So it will be rendered like you saw. Right now, we have an empty dependence area, so it will be rendered or it will be executed only once when the component is rendered and not after that. So I hope this example gives you a decent clarity of how use Effect Hook works and how this dependency array that exists is important, right? So I hope you have clarity of different scenarios in how this is executed and managed, right? So if you have the dependency array mentioned, like any sort of value, then this function that you're specifying will be executed only when there is any change or update in this particular value, right? And of course, it will be executed on the first render as well. Right? If you want it to be executed only on first render, you specify an empty dependency array. If you have something that you want to execute on any sort of change in the UI or any sort of rendering that happens, okay, you just skip the dependency array. Okay. But remember that it will be triggered every time when there is re rendering. All right. So keep the performance in mind. All right. I hope this has been useful, okay. And yeah, we disable the strict mode over here. You can just keep or stick to strict mode. Because strict mode is recommended in development mode. So I just modified this because I didn't want to execute use Effect hook twice on the component rendering for the first time, right? So I had removed that. But yeah, this is how things would work, and I hope this is clear to you all. 12. Hands-On Project: Build a Real-Time Mouse Tracker with useEffect: Welcome to this particular video where we are going to build our own mouse tracker, and we are going to make use of use effect hook for the same. Okay? So here on my screen, you can see this application where it's showing me the position of the mouse as I'm moving it. Okay? So it's completely real time, and we're making use of use effect hook over here for this particular application. All right. So this will help us practice some react concepts, and it will help us get a project in our portfolio. All right. So it's a very simple project, right? And let's jump right in. So here I am on VS code, Visual Studio code, and I have my browser open side by side. I've created a very simple VA project using VT, and you can see I'm here in app dot GSX, which is being rendered through mean dot GSX. All right? I have a CSS file two. Here with very basic CSS. It's a standard CSS that I can call it. Okay? You have phone family, you have text align the center, padding and margin set to zero, all right? Oops, and padding top is 40 pixels and minimum height of this. All right. So what we are going to do is we're going to build our own mouse tracker. Now, first thing first, what we need is we need to have a state over here. I'm going to call this state as mouse position. Okay. And this is going to help us track the position of the mouse. So this is going to have the latest position of the mouse, and it needs to be also updated whenever the mouse position changes. And I'm going to make use of use state over here. The moment I add us state, you'll see this input added at the top, all right? And this basically will hold the position in the form of key value pairs. So I'll have X, colon zero. So this is the position of X, and this is the Y position. So yeah. This is done. All right. Now what we need to do is we need to have we need to have a we need to change the interface. Okay we need to have a heading, so I'll say mouse position. Okay, and we'll display this mouse position over here. Okay. So I'm going to say P tag and I'll say X, colon and I'll say mouse position dot X over here. Okay. And I have Y position as well. Okay? I'll say Y colon and I'll display the Y position as mouse position dot Y, something like this. All right. So you can see the mouse position being displayed. It's currently 00 because that's what we have initialized it to. All right. Now what we need to do is here, I'll make use of use effect and through use effect over here, we have the listener and all managed. Okay? So here, use effect, ok and within use effect, I have this arrow function over here, something like this, and I have a dependency array. All right? This is what the hook will look like, right? When added use effect, make a note that this input was added at the top automatically. All right? Now over here, what I'm going to do is I'm going to have this empty dependency array, o and within this, I'm going to add of function. Okay. So I'm going to say handle, mouse move over here. Okay? And is going to accept event, and here I have a arrow function created. Okay? So this is what I'm creating and here, I'm going to say set mouse position. Okay? So this is updating the seats calling this, set mouse position, and I'm going to say X Clineventt client X. Okay. And I'm going to say y, Colin, event, dot, client, Y, something like this. Okay? So yeah, this is done over here. And then what I'm going to do is I'm going to add a listener to Windows. I'm going to say Window dot, add event listener, something like this, and I'm going to add a mouse move listener. Okay? So I'm going to say mouse move, this one. I want this to be triggered on any sort of mouse movement, right, so that I can track it real time, right? And I'll say handle mouse move. Okay. I hope this is making sense. What we are doing is we are simply adding a listener to window. Okay? This is a window. We're adding a listener over there, we are seeing mouse move listener. So it will track every mouse movement, and it will basically have this handle mouse move being executed. Okay? So I'll save this. And if you come over here, you can see it's working fine. You can see the position in real time, right? So yeah, this is the mouse tracker with the help of use effect hook. And I hope you have some good clarity as to how you can make use of use effect hook to good practice. 13. Cleaning Up Like a Pro: Mastering Cleanup Functions in useEffect: So now it's time that we talk a little bit more about the mouse tracker application that we pelt. So over here, we are attaching a event listener to the window, okay? Now, there is one small problem, okay? There is no cleanup that we are doing, right? The event listener that we are adding remains active even when the component is unmounted. Okay, and this can lead to memory leaks and unnecessary performance overhead as the listener continues to run. Okay? So this is not good, and we should handle this with use effect. So use effect can allow us to include a cleanup function to remove the event listener when the component unmounts and this ensures that the resources are released properly, and it prevents the potential memory leaks as well. Okay? So so what is the cleanup function? Cleanup function is a sort of a function that is provided to us with use effect where you can do cleanup, okay? So you can do sorts of cleanup tasks like removing event listeners or if you have any sort of timers running, and if the component unmounts, you can cancel those timers and all of these kind of stuff, right? And this keeps your app efficient and free from bugs. Alright? How do we add an event listener? So over here, what I will do is after the listener is added over here, I'm going to say return, okay? And I'm going to have an arrow function over here. Thing like this. Like so. Okay. And over here, I'm going to simply say, I'm going to have the code to clean up within this cleanup function. So this is a cleanup function over here. I'm going to say window dot remove event listener. You can see. What is the event listener we added? So it was mouse move. This was event listener, and I have the listener, as well. I have handle mouse move over here. Okay? So I get this removed, and here, you can do a console log if you wish to, okay? You can do a console log if you wish to. But right now, we won't be seeing any sort of output because this is triggered when the component is unmounted, right? So what we would do is instead of adding a console log over here, we will first trigger a manual unmount, right, we'll add a button which will enable us to mount and unmount the component so that we can see how this listener is working, right? So what I would do is I would move this entire code in fact, okay? I'll move this entire code, in fact, to another component. And in this app component, I'll add a parent component. Okay? So we will have a parent component which will load this mouse tracker and it'll have a button to unload as well. Okay? So let me show you what I'm talking about. So here, I'll create a new file. I'll say mouse, tracker dot JSX, something like this. I'll paste this over here. And instead of exporting the app over here, I'll just say mouse, tracker. Okay? This is a function. This is a component name, right? So this is what the component name is right now. And here in app dot JSX, what we need to do is we need to get rid of this. We'll perform some sort of cleanup, and we'll just add the parent component over here. Okay. So I'll just get rid of all of this code over here. Okay. And yeah, this stays app, and we need to render the parent component over here. Okay? We'll get rid of this. All right. Here we are getting an error because there's nothing that we're rendering, but I'll just keep TV for now so that we don't get any error. I'll introduce one more component called parent component. Okay. And I'll keep parent components separate. I'll say parent component dot SX. So we have added two components here. All right. And what I would do is I would say function. Okay, function, parent component, something like this, and I'll add an export over here. I'll say export default, parent component, likes Okay. And over here, I'll add a state. So what we will do is we'll maintain a state whether you want to show a component or not. Okay? So I'll say show component, and I'll say set show component. Something like this, I'll add use state hook over here. Okay. Now use state is true. So by default, we are showing this is Boolean This state has a value of boolean, and I can have constant toggle component, and I'll have an arrow function over here, something like this. And within this, I can say set, show component. And here, I'll say the previous value. Okay? So just reverse the previous value. That is what we are saying over here. Okay. So yeah, this is done. And what I need to do now is I need to return over here. So it'll say return, and I'll add a return statement. Okay, something like this. Win this, I'll have a TF like so. Okay, and I'll have a button. Okay. Now, what does this button do? So button on click. Okay. On click, it'll toggle component, Ls. Okay. And over here, I can make use of ternary operator. So if show component is true, o then what do we do? We have this value of unmount tracker, okay? Like the text is shown as unmount tracker. Okay? So I'll say unmount. And Mount tracker. And if the value is force, then we'll say mount tracker. So this text also toggles, right? Basically, that is what it means. Okay? So I have this button done. Okay? And now what I can do is I'll have this Ja script over here. If it's show component, okay, then what we need to do is we will render mouse tracker, something like this. Like. Okay. So we are conditionally rendering mouse tracker over here. Okay? What is happening is we are saying show component. I show component is true, then we are seeing render mouse tracker, right? So this is done, and over here, we need to instead of tf I'll add parent component, like so. L you can see the app is over here, right? So you can see this is coming in. I can render and un render. You can see. Okay, I can mount. And unmount. So the component is being mounted and unmounted. Okay? How this working? Okay, we just did a little bit of refactoring. We added a parent component. Okay? First, we created two files. One is two files, or I should say, two components in separate files. So this is parent component. Okay? We have mouse tracker component. So mouse tracker component is straightforward. Okay. We just have this mouse tracker with use effect hook and it is showing us the position of the mouse, right? And we have added a cleanup function over here. Then we have a parent component which has this show component state, which is pollen and there is a button which toggles this component value, this show component value to true or false, right? And then we are rendering show component this way. Okay? So this is taken care of. And then in the app dot JSX, we are showcasing the parent component only, okay? Because within parent component, we are actually rendering mouse tracker component, and that is conditional rendering with the help of operator. All right. So this is done, and now what we can do is we need to see how this function is working, right? So what I'm going to do is we need to add, I would say, we need to add the console dot log over here. Okay? And we need to track how the listener is being added and how it's being removed. So here, I'll say Log, okay? And here, we can say mouse, move, listener added, something like this. Okay? I'll remove this. Okay. I'll copy this and here in the return statement, inside return function, I'll see mouse move listener removed. Okay? Something like this. Now let us see the Console. I'll come over here. I'll come to Console. Okay. You can see. Okay, first thing, I'll do a refresh over here. Okay, refresh, and you can see mouse move tracker add, mouse move tracker, add it. I'm like moving my mouse over here, and you have mousemove tracker added, okay? Sorry, mouse move listener added. And now unmount, okay, you'll see mouse move listener is removed. Okay? This won't be the case if you don't have this cleanup function. So if you don't have this cleanup function, the listener is never removed. Okay? That is what the problem is. So if you refresh, you can see the listener is added. You can see mouse move listener is added, right? If I unmount the tracker unmount the listener mount the component, I should say, you can see there's no listener that is being removed, okay? So the listener is still there, and this can lead to side effects or any sort of parks. Okay, because you have a listener out there, right? That is not being used. Okay? So you can see and imagine how this is working fine, okay? So mounting mounting. You can see it's being added and right? So this is what a clean up function is, okay? I hope this is giving you a sense of how important this is. The goal of this cleanup function is, of course, like the name says, it's used to clean up, right? So any sort of cleanup task that you want to do, you can do it this way. Okay? This is the syntax over here. Okay. Within these curly braces, you can have all sorts of cleanup tasks, and you can see how this is being triggered on the component unmount over here. Right? So I hope this is useful and I hope you have been able to follow along, and I hope you now have a good grasp of how you can make use of Huge effect hook. 14. PROJECT: Creative Challenge By Building a Functional Digital Clock with React: Hey, there. So in this particular video, we are going to build this digital clock that you're seeing on the screen. So it's a very simple digital clock, okay? We are going to that is going to display the time over here. And you can see how it's updating the UI. You can see there is seconds, minutes, hours, and the entire time is being displayed, right, basically. This is what we are going to build, and we are going to make use of react concepts and go hands on with them. Okay? So this is a practice project that can help you reinforce the learning that you have with react so far. Alright? So yeah, without further ado, let's jump right into Visual Studio code. Alright, so to begin with, I have a very simple react chase project setup over here, okay? I'm making use of T over here, and this is a react chase project that I have. I have app dot JSix which is being rendered in mean dot JSX, right? And within app dot JSX, I have inputed I have this couple of inputs at the top. A very basic component definition, right, and I'm exporting this component of course. And within App dot CSS, I have very basic styling that you see over here just to, uh, just like this is not much, okay, but pretty simple styling I have in place. So we are going to build this digital clock from scratch, all right. Now, first thing first, what I'm going to do is I have this STIF right, and I have I need to update the UI over here, of course. But before updating the UI, we need to have time and we need to store time in the form of state, right? So I'll say const, I'll say time. Oops, I missed this. So I'll say time over here and I'll say set time. Now, of course, here, I'll say use state, ok. And I'll initialize this to new date. Okay? Something like this. Okay. So whatever new date returns, that's what it's initialized with. All right. Now this is done. Okay? Now over here, I'm going to make use of I'm going to make use of use effect over here. Now inside the use efectHok, what we are going to do is we need to update this time, this time every second, right. And basically, that is what we would be doing because this needs to have the current time, right? And time changes every second. So we need to update this street variable every second. Okay? We're going to have cleanups as well, so let us do it. So we'll say use effect over here. Okay. I'll have an arrow function. Okay, something like this. Okay. This is arrow function, and over here, I'll have a dependency array. Okay. So yeah, this is done. And what we need to do is here, I'll add some code. So here, I'll say cons timer ID. Okay. So I'm getting a timer ID or let us add this later. Okay? So what we will do first is we'll say set interval. Okay. I'm making use of set interval over here. Okay. Now, within set interval, I am going to have so I don't want this arrow function, okay? I don't want this arrow function. I'm going to say set time here. Okay, set time. And so I have arrow function. In fact, I said, I don't want arrow function. I have arrow function, but I just remove the curly breezes, right so that it looks a little bit cleaner. Okay, I can have the code written over here as well. So I can say set time over here. So I'm updating the state using set time. I'm saying new date, Okay, something like this, and I can actually add thousand over here. Okay, so here, I can say thousand, something like this. Okay. Oops, I missed a round bracket, I guess, set time, set time, Nutt, something like this. Okay, or 1 second. Okay, so this won't come over here. This is the interval. Okay? So this is the interval. I'll come over here. Alright? So this is done. Okay. So this is what it is. Now, let me explain what I just said, Okay, just in case you're wondering what happened. Okay? So here, I made use of set interval function. Now what is set interval? I'll just type in set interval again. Set interval basically is a JavaScript function, okay? It's a function basically repeatedly which will execute the code block inside it repeatedly after a set time interval. Okay? And what is the interval that we are setting? So you can set any sort of interval over here, which will be in milliseconds. So if I enter 1,000 over here, it means that 1 second. Okay. So what are you willing to do? What is the goal over here? We want to update time every second, right? We want to update time every second, right? The time should update every second, because time changes every second, and I'm building a dynamic clock, right? So I'm making use of set interval over here, set interval function. You can see if I hover on this, probably I'm I'm getting the documentation. Schedules repeated execution of callback every delay milliseconds, right? So this is the callback that we have. I can simplify this into single line. I can get rid of the curly braces because there is only one line of code. So I'll just get rid of this. This is pretty simple. Okay. I hope this is pretty clear as to what is happening, set interval, all right. Then what we are doing is we need to incite set interval. We are updating set time over here, and we are doing this every thousand milliseconds. Then what we need to do is we need to get the timer ID over here because we will be adding a cleanup function as well. So I'll say const timer, ID, something like this. Okay. So this is the ID of the timer that we have, okay? And then I'll have a cleaner function like so. Okay. I'll add an arrow function, and I'll say clear interval. Oops. I'll say clear interval. Okay, and I'll say time or ID. So I'm clearing the interval. Basically, this is a cleanup that I'm doing. All right. So this is the code to update the time basically every second. That is what we have written over here. Okay? This is what it does. Now, over here, what we can do is here, if you come here, we can display the time. Let us see what we see as the output. Okay, the output won't be good. It won't be in user friendly way, but I still want to show this to you. So if I save this, oops. So there's literally no output here. So it's not displaying anything because we are trying to display date over here and we are getting an error, okay? So you need to convert this date into a string. So I'll say, we have a function over here to local time string. Okay. And I can save this and you can see the time being displayed over here, right? So this is updating every second, right? Now, what we need to do is we need to format this, right. So I would say this is okay, but I need to have a better control on the sort of formatting that I wish to have for my application, right? So what I'm going to do over here is I'm going to have a function. I'm going to say format it, time, and here. So this is actually, this is doing a job. Okay? It's not a function, but it's doing a job of formatting the time to the right format. Okay? So we can do it without function. So I'll say time dot two local, two local time string over here. Okay. And we can pass in the local as well as the format, okay? So I'll pass in the local as EN US, okay? And here, I'll specify the formatting, right. So here I can say R, o Colon, I'll say two digit, something like this. We can follow this format. R, colon to dig it over here. So this format needs to go in a pair of curly braces, right. So that's something I missed over here. Okay, R to digit. I'll come over here. This is minute to digit, something like this, and this will be seconds to ditch. Okay. Oops, something like this. The moment you save it, you won't see any changes because we are displaying time. You need to display formatted time. So you need to come over here and get rid of this entire thing and you can display the format at time. Okay? Oops. So the second is not being displayed because we should add a comma here, probably. And let me see. Okay, so it's second and not seconds. Okay. Just S made the difference, right? You can see now it's in the format. 08. So earlier it was not 08. It was 8980 9:06 P.M. So I'm having now a better control on the formatting, right? So yeah, this is how the application is running, okay? And I'll just give you a gist of what's happening over here, okay? So first thing, first, how this application is working, we have a component. At the top, we are creating a a state that is maintaining the initial state of the time to current date and time, okay, using this new date. Okay? And we have this time state and set time function to update the state whenever it changes. We have huge effect hook over here, okay. And within use effect hook, so use effect hook essentially runs the code inside it after the component is rendered, okay? And in this case, it is responsible for starting the timer that updates the clock every second, okay? So we have an empty dependency here I remember, and it's running immediately after the component is rendered, okay? Now what is happening over here is we are making use of set interval function. Now what does set interval does? Set interval is a function that allows us to run some code repeatedly after a set time interval. Okay? And here, the time interval we are set is 1,000 milliseconds, which is 1 second. Okay? And we have a cleanup function which is clearing the interval using the timer ID which we have, and we are formatting the date. Sorry, we are formatting the time to our own desired format, and I'm displaying the format time. So what is happening is every time the component is re rendered, okay? So every time set time function is updated over here. The state is updated, the component is re rendered, okay. And every time this set time is called, time is updated, and whenever time is called, formatted time is updated. And whenever formatted time is updated, you're seeing the updated value over here. Okay. So that is how this entire thing works. Whenever the time state changes, the component re renders and the newly formatted time is being displayed. Okay? And this recurring thing is being set by the set interval function because that is what that function itself updates the time state every second. Okay? And whenever the time state changes, the component is re rendered and formatted time is displayed, and the process repeats, so the time is updated constantly in real time. All right. So I hope this is good. And now we need to do a little bit of, like, beautification, I would say, over here, right? So what we can do is we can improve the CSS so I can get rid of this welcome at the top. Okay. And I can add a TIF. I'll call it class name, and I'll call it clock container. So this is exclusively for styling over here, okay? You can add one more tif over here. I can see TIF. Okay. And I can move this, this inside over here. Okay, something like this. Okay. And over here inside clock container, I'll say class name as clock, something like this. Okay. Now, we need to add some CSS. I'll switch over to app dot CSS. I have some Bsic CSS over here. Okay, which I'll get rid of. Okay. I'll get rid of. And I'll say clock container. Something like this, and I'll say display of flags over here. Okay, justify content as center, and align items as center. Okay, I can I can set height. Okay. And we'll have background color. Okay, so background color, I have a color code for this. Okay, so I'll say hash and 2a2c3, four. Okay? You can have a color of your choice. Okay. Now after updating the color, the clock is barely visible. That's absolutely okay. All right, we'll update the clock as well. I'll say clock over here. Okay. I'll set some font size over here. Okay. Font size of, uh, four ERM. Okay, uh, and yeah, clock is bigger now. Okay, family, font family of I'll add a family over here. This can be the one, and I'll say color. Okay. So we can have a color. And for that, I have a color code. So I'll say 61, DAF P. Okay? You can add the color of your choice. That's absolutely okay. And background color. I'll set the background color to hash. Oops. So this is hash 202, three, 202, three, two A. Okay. Like this. So totally up to you as to how you want to manage it. Okay? And I'll set the padding over here. Padding of 20 pixels and 40 pixels. Okay. Something like this. Okay. So I'll zoom out a bit so that this looks okay. I'm ultra zoomed in. Okay. This is looking cool. There are white borders besides what I will do is I'll get rid of those white portals, so I'll have star over here, margin of uh oops. So margin of zero pixels, like so, and you can see the white portals are gone. Okay? So this is done. Padding, I can add a border radius, okay powder radius of, let's say, ten pixels, okay? And, yeah, this is it. I believe this is it, right? So this is our clock in the full screen mode, as you can see over here, okay? And I hope you enjoyed this tutorial, and I hope you got to learn a lot, okay? I hope this was useful and see you next time. 15. Diving into useRef: The Silent Guardian of State: Hey, there. Now it's time that we begin talking about the use ref hook. Now, Uf hook is also provided by react to work with functional component and it is different from use state hook that we have. Uf hook is used to store values, but it is a little different from how us state manages it. Uf will allow you to persist values across renders. This is different from us state, wherein state, if you update the value, it will allow you to cause re render, right? Another thing about useref is it does not cause the component to re render. So like I just said, use state would trigger re render. Okay? Sref, on the other hand, does not cause the component to re render when the value changes. Okay? So to put it to context or to put it simply use ref hook in react is used to persist to value across renders without causing the component to re render when the value changes. Okay? So come again, it is used to persist values across renders without causing the component to re render when the value changes. And one of the major things as to why SRF is being used or where SRF is being used is for storing Dom reference, okay? So it allows you to directly store the reference to a Dom element and interact with it. For example, you can add focus to that input field on some event, okay? You can have scrolling and so on. So this is one of the use cases for URf and this is one of the major use cases where it is commonly being used, okay? It can be used to store values that does not need or does not need to cause re render when updated. Okay? That is as per the definition as it says, Okay? For example, you might want to store a timer ID, a previous value or any other value that needs to be persisted across renders, but does not trigger the UI update. Okay? So that's US Ref hook for you, and let us try it in action or let us see this hands on as to how it works. So what I will do over here is here, I have a react project, okay? It's a project created using wheat, and I have a functional component here, app dot JSX, which is being rendered here in main dot JSX, okay? Onto the root element. All right. So I'm going to make use of this to type in some code. It just has some simple JSX that it's returning. Right now, it has a TIV with H one tag. Learn react as you are seeing on the right hand side, right? So what I would do over here is I would make use of use Rf over here, okay? So I'll say const. Say my Rf over here, and I'll say use ref. And you can see this thing being suggested over use ref. The moment I select this, you would see an input being added at the top. Okay? You can see this is the input. And this is being imported like any other react hook you have us state, use effact and all. Okay? If you hover on this, you can see, you can see use ref returns a multiple ref object. Whose current property is initialized to past argument, which is initial value, and the return object will persist for full lifetime of the component. This is what we spoke about. We have not yet spoken about the object over here, the ref object that it's talking about, okay? It's saying that it has a current property. I'll show that to you in a moment. Okay? But it says the returned object will persist for the full lifetime of the component, and like I said, it persists across renders, okay? It is useful more than the f attribute. It's handy for keeping any mutable value around similar to how you would like to use instance fields in the classes. All right. So let us take a look as to how you can make use of it. So I have URf and I'll pass in a value over here. Okay, I'll say hello. And I'll say Wold over here, something like this, and I'll add a semicolon. All right. So this is done, yeah, we have E ref created. Okay? So this is the initial value that I'm passing in, and this is what myRf is holding right now. Okay? Now, what we will do is I'll just print this onto the console and we'll see what this MRf is holding right now, okay? So I'll just have my ref printed. Okay. And I'll save this. Okay. And here, I'll head over to the console. Okay, and I'll go like this way. All right. Let us see what it has. So okay, it's printing it twice, and it's just because of the strict mode in min dot Jx our application is being rendered twice, okay? But if you remove this, okay, you'll see it being printed once. Okay? So if you expand this object, you'll see the object has current over here. Okay. And you can see it has current, and let me zoom out a bit so that we see it clearly. Okay. So yeah, you can see it has current and whatever the value we have passed in, hello world, that is what you're seeing over here. Okay? So so what it has right now is, let me print over here, okay? It has something like this. It's an object like this, and it has current property in it, and the value of current is hello world, something like this. So this is what MRf is holding right now. This is the object that it's holding right now, and that is what it's printing here onto the console. You can see it's a type object. Right? And if you want to play around with the value for use ref, you need to work with the current property, okay? So right now, the current property is holding hello world Y because I'm initializing it to hello world over here. Okay. So whenever you print serf object, you will see an object with a single property which is current, and the current property stores the value of whatever you have assigned, like a dom element or a value or an initial value. Okay? You can access the value stored in the use ref by making use of current over here. Okay? So so yeah, that's about use ref. So what I would do is I would come into sot. This is what it is. And I'll show you how you can make use of this in the TSX. So here, let's say, if I want to print hello world, so I can make use of these two curly braces, I can say my ref. And how would you access the value? You'll say dot current? Okay. If you save this, you'll see learn react, hello world, right? So whatever value you're passing in over here, okay, whether it's zero, one, hello world or whatever it is, you can refer to it using current. I hope this is making sense. Now what I would do is I would build upon this example, o, and I'll just clear this up over here. Okay. Let me build upon this example. And right now I have my ref, okay. So I'll rename this to ref count, okay? So this is ref and here, instead of use ref and I have a string being passed, I'll pass in zero. Okay. I'll get rid of this over here, console dot log, and this as well. Okay? Now, what we'll do over here is we have a ref count, Rf over here, okay? And I'll add a stet as well. Okay, so I'll say Const over here, and I'll see stet count. Okay. So I have ref count. I have Steed count, and I have set Steed count over here. And I'll say use state, and I'll initialize this two also zero. Okay. So this is also done. Okay? So we have use ref and use State, which are being initialized to zero. All right. Now what I will do is I in the interface over here. Okay. I'll get rid of this H one, right, and I'll add up P over here. Okay. I'll see State Count over here. Okay. And I'll say State count. Something like this. Okay. You'll see State count over here onto the interface on the right. And over here, I'll add E button, something like this. Like so. And for button, I'll say increment, State Count. Like so. Okay. Here this button. Okay. And what I would do is when the user clicks on increment state count, I'll increase the state value by one. All right. So what I can do is I can say const, I'll had a function because I'll need function to handle this increment state, count. State count plus one over here. Okay. And I'll save this. Okay? So we are having increment state count over here and on click of this, I'll say on click. I'll add Oops. I'll add increment state count. Oh, so this needs to be added. Okay? So yeah, I'll increment it and you can see the state count is being incremented this way. All right. Now what I will do is I'll add a rough count as well, o in a similar way and I'll just copy this. I'll paste it over here. Okay. And what I would do is interstate count, I'll say f count over here. Okay. And this is f count. How do we display a ref count? R count dot current, right? Because current is what is holding the value. Ref count is having an object with current as property. All right. And I'll say increment Ref count. This function does not exist yet. We need to create this and I'll save this. Okay, so the output is gone because this function does not exist, which is absolutely fine. I'll replicate this over here and here, instead of increment state, count I'll say increment ref count over here. Okay. And yeah, everything is coming in one line. Okay. So I can move this to a new line just by adding PR. I'll just get rid of this over here. Or I can probably, I'm sorry, this is not a good idea. I'll just get rid of BR over here instead. I'll come to CSS over here. I have display flex. Okay, these are basic cases that I'm having. Okay. For DIV, I have the display of flex, and I'll set the direction as well, the flex direction of column. Okay, and this sets everything vertically. I think this is the best solution here. All right. And yeah, I have increment count over here and increment ref count for increment ref count, I need to say over here, f count, Toto I need to clear this out. So f count, Tt current and we need to say plus equal to one. Okay. So yeah, this is a shorthand way of doing things. All right. And I'll save this. Okay. And let us see how this works. So you can see State being increased, ok? State being increased, Rugh count is bound increase because it's not causing re render. Okay? But if you say console dot log over here, and if I print in the value over here, if I say 1 second. So if I say rough count, right. And I'll say here. Okay, dollar count at current, something like this and semicolon. I'll save this. Okay. And this cause re render, so you can see how basically the count was updated. But if you come over here to inspect, o, and if you open this, go to Oops. Go to Console, something like this. All right. I'm seeing ref count is not defined, all right. This was an error early on. It should not come now, okay? So you can see state count being incremented and ref count being printed on the console. Okay. Now, if for any reason the rendering is caused, you can see the ref count being updated over here, right? Otherwise, it just keeps incrementing and printing it onto the console. It's not being reflected onto the UI because it's not being re rendered, right? The moment I update the state over here, rendering happens for the component and the ref count is updated. I hope this is making sense as to how this is working. And this is a good example to help us understand the difference between use state and the use Rf, okay? So you can see over here, persist use Rf is used to persist values across renders, and it does not cause the component to re render when the value changes. And that is what we are seeing clearly over here, okay? And if you want to test or if you want to have some sort of a code that runs on re render, what you can do is you can make use of use effect to actually see if the component is being re rendered over here. I'll say use effect over here. Okay. And yeah, what is the syntax for use effect? So we have a arrow function as a first parameter. Okay. And then I have a dependency like this. Okay? So this is what the function is. Now, what I'm going to do is I need to see or I need to run this effect on every render. So I'll get rid of the dependency and over here in the function, I'll say lock over here. Oh, oops, so log this one. I'll log to the console. What are we logging to the console? I'll just say component re render. Component rerender, something like this. Save this. You can see it's being rendered twice initially. Okay. Let me refresh. It's being rendered twice initially because of the strict mode that we have in main JSix, which is absolutely okay. If you want, you can get rid of the strict mode, just for this example. Okay. I'll do that. If I save this, now you can see it's being rendered only once, right? If you come to app.j6, all right, it's being rendered once. I'll do a refresh still. You can see being rendered once. Now what you can do is increment the Street count. You can see component is rendered again, re rendered again. The number of time you click, you click the increment Street count, you'll see the component being re rendered, right? If you say increment ref count, you'll see ref count being updated, but you are not seeing the component being re rendered, right? And if you increment a state count. So here, before incrementing the state count, just take a look at the ref count in the interface. It's zero, right? But on the console, ref count is 15, but it's not being reflected over here in the UI because the component is not yet re rendered. So if you say increment state count, the component will re render and ref count will be updated over. So let me click this and you'll see ref count is updated. Right? So yeah, and you can even see the log being printed component re rendered, right? So use effect hook logs component rerendered every time the component is re rendered, and this is helping us observe when the component is actually re rendered on what event, right? So yeah, to summarize, when you click the increment state count button, the component re renders and you see the log in the console that it's rendering. When you click the increment ref count button, the ref count is incremented, but the component doesn't re render, so you won't see the use effect lock in the console over here when you click Increment Rf count, right? I hope this demonstration is really helpful to understand the difference between use ref and use state. This is a confusion among student. It creates a lot of confusion as to, Okay, so I'm willing to store use value, should I use use state or use Rf, okay. They both have their own benefits, and I hope the difference is pretty much clear to you all, right? So I hope you have been able to follow along, and I hope this was useful. 16. Bringing useRef to Life: Managing HTML Elements with Ease: So now it's time that we take a look at how can you make use of use Rf with HTML elements? So in this particular video, what we are going to do is we are going to have an example where we make use of us ref to bring focus to an input element on button click. All right? So to begin with, since we're making use of usef what are we going to do? We're going to create a input ref. Okay? So I'll say constant input Rf. Okay, I'm going to make use of use ref for creating the hook over here, and I'm going to initialize this to null for now, right? And what I'm going to do over here is here, I'm going to have a input element. Okay, so I'm going to have input. Something like this. And I'm going to have type, type of text. Okay. And I'm going to have placeholder. Placeholder is focus me. Okay, that's a placeholder that I'm having. Okay, you can see this placeholder. Okay, so focus should come like this on a button click. So we need the button as well. Okay, so I'll add a button over here. Okay. So I'll say button. Okay. And on click and here, I'll link this to a function, but the function does not exist, so I'm leaving this blank for now and I'll say focus. Oops, focus, something like this. Okay. And yeah, on click of this button, what we need to do is we need to call this function focus input. Let's call it focus input. I'll come over here and I'll define this focus input. Okay? So I'll say const, focus input. Okay. And I'll say I'll have arrow function over here. And yeah, this function does not do anything. But click of this, the focus should come here. All right. So what are we going to do now is I'm going to say input ref input ref current dot focus. Okay. So I'm making use of this right now, okay? And what is input ref? Input ref is right now initialized to null. It is null right now. Okay? So how do you point input ref to this input field over here? Okay? So what you would do here is you would say ref. You'll make use of ref property over here and I'll say input ref. That is it. Okay. Now, the moment you do this over here, okay? The input ref is going to have the reference to this particular input over here. Okay? You can take a look at that. So what I'll do is I'll say Console dot log. That's the best way to see what a particular element is holding, right? I'll say input ref. I'm printing input ref. Okay? Let us comment this for a while, okay? And let us head over to Console. Let us go to Console. Okay? So you're seeing, okay, 1 second. So this is some output that I'm seeing. Okay. So right now I'm seeing nothing on the console. The moment I say focus, you'll see current is having the input element. You can see is the input element. And if I expand the input element, you can see it is having all the properties or the attributes of input over here. Okay. So that's the entire input element that you are seeing, right? So yeah, this is what we are going to play around with, okay? So it's referring to this input element, right? So I'm going to just comment this out over here. And instead, I'll enable this. Okay, I'll save this and let us do a refresh over here. Okay? If I say focus, you'll see the focus turns out to the textbox, or the input box, I should say. Okay? I remove the focus. If I say focus, you'll see focus comes out over here. Now you can do a lot more, okay? Rather than just focus, you can even update the uh the color over here. So I can add over here focus and highlight. Okay? All right. And here, after focus, what I can say is input ref, dot, current dot style, dot, background color is equal to. I can add any sort of color, gray, whichever color you want. And I'll save this. Now, if I say focus and halight you'll see it changes to gray. I can keep it here look gray is looking too weird. All right. So I can say focus and hlight you can see it's working fine, right? And you can have multiple refs also into a program. So if you have multiple input boxes that you want to move focus to, you can have multiple f. Okay. So let me show an example of that as well. Okay? So I can call this as input ref and I can have over here, input ref next over here. Okay. So I'll call this next. Okay. And what I can do is I can choose duplicate this over here. Okay. Duplicate this and I can say input ref next over here. Okay. Focus me, focus in hight and instead of focus input next, something like this. Okay? So I updated the ref and the onclick function. All right. And here we need to have that function as well. So I'll just duplicate this over here. Okay, focus input next, and I'll get rid of this comment here. Okay. And instead of instead of input ref over here, I'll have input ref next, something like this. You can see focus and it, focus and it. You can see both are working the same way. You can see, right? You can even have a button to reset the focus, and it will reset the focus and style for each one of them. So I'll just do that and show it to you. Okay, so I'll have this. I'll add one more button. I'll say reset. Okay. It's a reset button. Okay. And let's reset focus. Okay. So on click, I'm linking it to a reset focus function. Now Reset focus does not exist, so I'll just duplicate this. Okay, and I'll call this reset focus, something like this over here. Okay. And then what I would do is I would say input ref current style dot Background. Okay. I'll say Input ref, current style background, I'll say white over here, and this also will be white, the next one, right? Okay. And yeah, so I can see focus on it, focus on it. Let me refresh. So focus light, focus on it, and then I can see reset. You can see on resetting, the focus goes away, right? Oops, it's rest. So I did a typo. It's reset, actually, okay. All right. This is looking cool. Focus on it, focus on it, and then it's reset. You can see right? So this is one of the use case, and this is one of the common use cases where serf hook is being used. So serf hook is frequently being used. If you read the code online, any sort of react code, you would see it's majorly used with HTML elements uh to get more control over the document object model. All right? Like we are doing over here, we are having a better control as to what we are doing with the input elements over here, right? So yeah, that's about the user ref. Also, one more thing, when you update the focus and all of this over here, it is not causing the component to render. Okay, because that is one of the things about use Rf. Right? So whenever you're doing this, whenever you're changing this, you can just have a use effect over here, use effect hook over here. Okay. And I can simply have a arrow function over here without any dependency array. Okay? I can just do console dot log over here and I'll see component renter. Okay? I'll just have this message. I'll just save this. If you go to inspect, Okay. You'll see component rendered. Of course, it's coming in twice, and the reason for this is because I have it in strict mode. Okay. If I say focus and allied, focus and allied reset, you'll see component rendered is not being printed, which means the rendering is not happening, right? And this is one of the best things about use Rf. It allows you to add dynamicity into the webpage or your component without causing re renders, right? So I hope this has been useful and I hope you have been able to follow along this simple example. 17. Breaking Down Prop Drilling: The Good, the Bad, and the Ugly: So now it's time that we begin talking about this concept of prop drilling. So I have a react project, and here I have this file called app dot CSX, along with app dot CSS, okay? And I have this basic GSX that I'm returning along with some simple CSS that I have already added. Now what is prop drilling? So prop drilling is a situation in react where you need to pass data from top level component down through the several layers of intermediary components to a child component that actually needs it. Okay? So you will have a scenario wherein you have a lot of nested components, okay? So you have component one, okay? Oops. And then you have inside component one, you have C two, okay? And then inside C two, let's say you have C three. Okay? This is a hierarchy that you're following, okay? There might be more in the hierarchy, but I'm just giving you an example of three. And let us say C three needs access to some data. Okay? So C one will be passing this data to C two and C two will be passing this data to C three. Now, if there are ten levels like this, okay, the data has to be passed through ten levels. That is what this essentially means. And this is what prop drilling is because here you are passing the data with the help of props, okay? So coming back to the definition again, prop drilling is a situation in react where you need to pass data from top level component down through the several layers of intermediary components to a child component that actually needs it. Okay? Now, C two over here, in this case, is a intermediary components. If there are ten more components in between, those all will be intermediary components. Okay? And this thing is known as prop drilling. Okay? Now, this often happens when a component that needs the data is deeply nested. So C three over here is deeply nested within the component tree. And the data must be passed through each component layer, even if those intermediary components to need the data for their own usage themselves, right? So C two way might not need the data. But since C three is needing the data and C one has passed it to C two, C two needs to pass it to C three as well. Okay? So C two will also have access to data. Even though it does not need it. Okay? So let me try this out or let us see this with the help of an example. So what we are going to do is we are going to create this kind of a component hierarchy, okay. We'll have a few components like component A, B, and then we'll have one component in the end, which will actually need the data. Okay? And we will send the data from the top component to the bottom component, okay? Or the deeply nested one. All right. So that is what we are going to do, okay? And to begin with, what I'm going to do here is I will here in the app, okay, I'll first begin by creating a variable. Okay. So I'll say const over here. Okay, so this is are data that we need to pass in. I'll say value of theme, and I'll say Tako let's say we have this data, some data in some variable, and this is the theme that we want to have, ok. And we need to pass this data to the last component in the hierarchy. All right. And here we are returning this JSX, okay. But what we will do here is, let's say I have one more component, okay? So we'll create a few components, so I'll get rid of this over here. Okay. And I'll trim down the JSX over here. Okay? Let's say I have one more component, okay, I have function. Okay. And this is component A over here. Let's say, okay? And here, I'm making use of destructuring and I'll say theme over here. Okay. And I'll return over here. What am I returning? I'm returning component B. Okay. What is component B? We need to define that. Okay? And I'm passing this as a prop, this theme that I received from the top component. Okay? That is what I'm doing. Okay. Now I have component B over here at the bottom, okay? So I'll say function. Okay, component B, and I'll have destructuring. I'll say theme over here. Okay. And over here, I'll say return themed component, okay? Okay. This is our component that actually needs the data, and I'm passing it to the component with the help of props. Okay, I'll have one more last component, which is themed component. Okay. I'll accept them over here. Okay, something like this. And over here, I'm going to say return, div, all right? I'll say the current theme is, okay and the value of theme, something like this. Right? This is done. Okay, so what we are doing is we are having component within component within component, and here at the top, okay, I need to add component A, right? So here, what I will do is I'll I'll say component A. Okay, component A, and I'll pass in the theta. I'll say theme, theme over here. Okay. And I'll say the closing over here. Okay? So this is done, and you can see the current theme is dark over here. Now here, how this is organized is we have component A, okay? Or we have app over here at the top, right? App over here. Okay. Then we have component A, so I'll add component A over here, we'll understand the hierarchy, basically. We have component B. Okay, this is component B. I'll come down, I'll add a comment. Okay. And this is component C. So is there component C 1 second? No. So instead of that, we have themed component. All right. We then add C over here. Okay, so this is what the hierarchy looks like. You have app component at the top, component A, component B, and component are themed component. Now, this theme component needs the data, okay? Needs theme over here. So it needs access to the theme for whatever sort of processing, okay? And the data exist over here, okay? This is the data where you have the data. App, right? So you can see app over here has the value of theme. Right? And it may get it from user or wherever. Okay. But right now we are just having the data created by default assignment using a variable. Okay. And we need them component needs access to this data. So what it will do is it will pass this data through the layers or through the components with the help of props over here. So you can see, I'm wrapping. I'm having this component A over here, and I'm passing the theme to component A, then to component B. Component A is accepting it and passing it to component B. Then component B is accepting it and passing it to C, and component C is passing it or sorry, component B is passing it to them component, not component C, and the theme component is accepting and displaying it. Okay? So it's actually displaying it can do whatever sort of processing you need, okay? And you can see the data is being passed in the right way. Okay? I can even add some sort of CSS, right, so that you can see how this layering is actually done over here. Okay? Now, over here, I'll add TIF over here. Okay. And I'll just wrap this entire thing inside this stiff o, something like this. Okay. And over here, I'm going to say style. Okay. And we can have a style for border. So I'll say border, cool in two pixels over here. Okay, two pixels, solid and black, something like this. And I'll have padding over here. And padding is of 20 pixels. Huh. Something like this, oops. So there is some problem. Okay? So I have added styles. So problem over here. Okay. Let me see what the problem is. Okay, so it says there's no closing tag for Dev. So I'll better add a closing tag, and I'll save this. You can see this is the component that we are talking about, right? So if I expand this a bit, you can see the current team is dark over here. Okay. What I would do is I would actually also add one more thing over here. Okay? We can add h2h2 over here. Oops. Oh, I'll just add a fresh one H two, ok and something like this. Okay? So I'll say app compoont app or I can say parent over here. Okay. So this tells us that this is parent. Okay? You can see how this is being displayed. Okay. Now what we can do over here is I'll copy these things over here. Okay. I'll add them or 1 second. Let me copy this entire thing, and that will be easy. And I'll add the entire thing over here or let me get the return as well. Okay. So I'll get this entire thing. Okay. So we are rendering component B. Remember that. Here, I'll change this to component B. Okay. And this is not app now, this is component A. Okay, component A, and I'll get rid of this. Or you can say child over here. Okay, you can see a parent has component A, which is the child, right? And I can actually copy this over here. I can come over here to themed component and I can replace the entire return over here. Okay. And over here, I'll say themed component, or sorry, component to B. Okay like so, and here I can have themed component, something like this. I'll save this. You can see app component A component B, and then you have the last component, which is actually displaying the theme over here. Okay. So for that, what I would do is I would actually return I would actually add this return over here. Okay? This is added. And what I will do is I will have this div cut out over here. Okay. And we are not adding any sort of component here, so I'll just add this o and I'll get rid of this return here. Okay? And this is done. I think this is themed component, right? So I'll add this over here. Okay. So this is great I'll say grandchild over here, right? And then here, this one is on a second. I'll copy this grandchild. This is grandchild, okay? And this is parent and child. You can see? Okay. So this is how it's coming across, right, and better, let me move to a full screen view over here. Okay, so you can see the full screen view here. All right, you have app component, then you have child component. You have component B and within component B, you have the themed component, which is the great grandchild, right? And this is the theme that is being displayed. Now, this thing over here is known as prop drilling over here, right? What we are doing over here is we are passing some data throughout different components, okay, to the child component over here, the grandchild component over here, which is deeply nested within the component tree, and the data is passed in through each component layer. So it is being passed through component A component B. Now component A and component B don't need this data. Okay, still, they have to access this data and pass it on further because it'll break the chain otherwise, okay? Now, this thing is known as prop drilling, and one thing about prop drilling is, of course, this is doable, but this makes your code harder to manage and maintain, especially as the app grows in complexity. So app is simple right now, so it might seem easy. But when app grows in complexity, it might become really difficult, yeah, it's not recommended. It's recommended up to a certain level, but not beyond that, right? So yeah, this is about prop drilling, and I hope you have a good clarity about what prop drilling is. 18. Harnessing useContext: Simplify State Sharing Like a Pro: All right. So here, what we are doing right now is I have already set up an app which has multiple components nested together, and we have this value or some data that we are passing through with the help of prop drilling. Okay, so we are passing it to component A, okay? This is the component inside app. And then this component passes it on into the tree and the component, which is themed component, which is deeply nested inside the tree is displaying the value of theme over here. Okay? Now, it's displaying dark over here. If I change this dark to light, something like this, it'll update the value to light. Okay? So this is prob drilling over here. Now, prob drilling as a concept becomes problematic when you need to pass data through many layers of components, okay? And right now, what is happening over here is if I scroll up, okay. So here you can see this is how the hierarchy looks like, right? Themed component needs theme over here, and app component has the data, that theme component needs. Okay? So I'll just add it over here. I'll say has theme. Okay? Now, what is happening over here is component A and component B are just doing the job of passing the data, right? Now, there are quite a few problems over here, okay? One is you are passing the data through unnecessary layers, okay? Like, you have component A and component B that don't need the data, but they are just doing the job of passing through, right? Maintenance burden. So tomorrow if your component hierarchy changes, let's say you insert a new component in between or you remove a component in between, okay? So any sort of change, you have to ensure that the new component also passes down the them proc to the team component, okay? So that the hierarchy does not break and the data passing does not break. Otherwise, team component won't be able to display the data that it's displaying right now, and it would break the app. Okay? So if some other developer is working and if he's not aware that this data is being passed, it could lead to blunders, right? And there's unnecessary complexity right now wherein the more layers we have, the more the more messed up, I should say, the prop chain becomes, right? And it makes a code harder to understand and maintain, right? And this is where the concept of use context hook comes into picture. Okay? So what is use context hook? This is use context. Okay? So this is a hook basically using which you can set up the theme context, and you can access the them directly from the theme component without needing it to pass it through component A and component B. And this simplifies the component T, reduces the maintenance overhead, and Uh, the maintenance overhead is reduced because the intermediate components that we have A and B, they do not need to pass or be aware of this theme prop which they don't need, right? Right now, they are being made aware of this, okay, because it needs to be passed to the theme component, via prop drilling. Okay? So this is where use context comes into picture, okay? Now, how does use Context works? So there are a couple of parts over here. Okay. First is you create a context. Okay? Now, the context essentially creates a context object, and this is a syntax over here. So this is context object that we are creating, we are saying const, my context, okay? And we're making use of Create context, and we're passing in some default value over here. Okay? Now, this default value is optional over here. It's not needed, not mandatory. But if you wish to pass, if you wish to have a default value, you can pass it over here. Once this object is created, the context that has been created is consumed, okay? So wherever or whichever component wishes to make use of this context can use it in any component, okay? And basically this can be used over there. Okay? Now, there's a concept of provider as well, okay, wherein you can wrap the component that need access to the context value, okay? And the component in that tree, any component tree can access the context value over there. Okay? But provider is something that we park for now. We'll just understand how you can create the context and how you can consume it. Okay, we'll keep things simple Okay. So what we will do is we'll copy the syntax over here. Okay? I'll take the syntax over here. And what I will do is I will scroll down over here. Uh, what we have right now is we have theme, right? What I will do is I'll get rid of this theme, and I'll say my context, or I can say theme context over here. Okay? I'll say create context, and I won't have any sort of default value over here. Okay? So this is what I'm doing. I've created a context now, okay? Now if I scroll down over here, I'll get rid of them over here, the theme that I'm passing. Okay? This is also not needed over here, okay? Since we are not passing the theme, this is also not needed. So I'm actually getting rid of all the props that I'm passing over here and I'm simplifying things, right? Now, this is done. This is also removed, and yeah, this is done. Alright. Now we are displaying theme over here. Of course, team won't work because team does not exist. So the moment I save this, I don't see any output because there's an error on the console. Okay? That is understood. Now the thing is, we need to display the theme over here. Okay? So how do we display? We need to consume the context, right? So we need to consume the context in them component. Okay? So I'll come over here to them component. Okay. And here somewhere, I'll make use of them over here. I'll say theme is equal to use context, and the name of the context that we have is theme Okay, it's not team component, but it's them context over here. Okay. And then I'll save this. Okay. And I'm not seeing the output yet. Okay? So upon checking the error, I learned that create Context is not defined, so there's a problem with the inputs, okay? So if you scroll up over here. Okay? There's literally no input to import, create context and use context. I'll say Control and Shift Control and space over here and you'll get this out of suggest, okay? So I'll select this and this will probably get imported at the top. If it does not get imputed, just add this if it does not happen automatically for you. Okay? And I'll scroll down. Use Context is also supposed to be imported, so I'll say control and space over here in the end of use Context, and I'll select this. If you scroll up, you can see use Context also being added. I save this, ok? What is the error now we are getting? Okay? So uncaught error in the reference them context is not defined at theme component. Okay, so it's it's saying it's not defined because this is inside this component app, right? So we need to move this outside, right? So what I will do is I'll come over here and I'll create it over here. And you can see the output now, okay? So yeah, this should work fine now. All right. So what was happening is I had the context created inside app component, and I was trying to access it from another component. So that didn't work, of course. Okay. So I've created the context, right? It's created, but you can see there is no value over here, so I can provide a default value here. I can say light, for example, I can save this and you can see the current theme is light over here. All right. So this is what use context is. It is basically showing the default value that we are having over here. It is creating a context, and this context is being consumed in the themed component. Okay? So this is how you can instead of making use of prop trolling, okay, you can make use of context over here and you can make use of the data across the components. All right. So I hope this is making sense, and I hope you have been able to follow along. 19. Creating and Implementing a React Context Provider: Now use Context has this concept of providers, okay, which is used to provide A context. Now, over here, you have use Context, okay? This is the hierarchy that we will be working with, okay? We have app component A, component B, and them component is nested. This team component needs team and app has the theme. All right? Now over here, we need to make use of provider, right? So this is a syntax for making use of the provider. So you can say my context, which is the context name dot provider and pass in the value, and this should be wrapped around the component, as you can see, where you want to provide the context. Okay? Now, why do you want to provide the context? Okay? So here, we have created the context, and we are consuming the context in the theme component over here. Okay? It's a different component. Now the thing over here is if these components are all in the same file, if these components are broken down into individual files, then this won't work, because you will then have to export the theme context from one file and get it inputed in the other file for it to work, right? And also, one problem over here is theme context is right now having a default value that is being used by the theme component. So tomorrow if you want to pass the same context to some other component with a different value, you cannot do that. And for that, you need provider, okay? So what is provider? Provider basically wraps the component that needs access to the context or value, okay? And the value that is being provided. So this value is the value that is provided for context over here, okay? So this context then will be available with this value to this component. That is being wrapped and also all the nested components that will be wrapped within this particular component. Okay? So let me demonstrate this to you. All right. So what we are going to do is we are now going to make use of the provide over here. So I'm going to copy the syntax over here. Okay. And let us come over here to component A over here, and after H two, or let's say at the top over here, okay, before TIF I'm going to add this, and there's auto closing being added over here. I'll just cut this, Okay, and I'll just take it over here. Okay. Right now, this is wrapped and I need to add the value for some value over here, okay? And what I will do is I'll say dark over here. Okay? So let's say I'm passing in the same context with the value that of dark. And if I save this, okay, I get an error. Let me see what the error is. Okay, error is obvious. My context is not defined, okay? So I did a small mistake here. I'm making use of my context. It should be the context name, which is theme context. I'll just replace this over here. So theme context dot provider, value is equal to dark. And if I save this, you'll see the current theme is dark over here. Okay? So this is how you can make use of providers in the code, okay, or along with Context. Now, this is very useful because whatever context you are providing over here with the help of providers, it is available in the entire component tree, okay. And basically, you can access it from the nested component as well, right? Now the benefit over here is, even though the component in future, you separate the component into individual files, then the context would be available for theme component because they are being passed in through a provider. Okay. If you're not making use of provider, then you have to export and import the context. It's not good, and you also have the default value and not the modified value. Okay? So tomorrow if you want to reuse the context for some other components, you know, you can modify this default value and pass it just the way we are doing over here, okay? So here we are just modifying the default value. Default value is light, and we're passing in dark over here because we want dark, and we're seeing the output over here. Okay? So yeah, I hope you're clear about what providers are and the importance of provider and how you can make use of it. 20. Updating Context Values Dynamically: So now let's talk about how can you update the value of the context, okay? And what we are going to do is here, we have this particular context called theme context. Okay? It is giving us the value of theme, whether it's light or dark. And we are passing in dark over here through the theme provider, okay? Theme context provider, I should say, okay, or context provider. And then we are accessing this context here in the nested component, okay? And we are displaying it as dark. Okay, you can see it over here. Alright. Now, what I would do is I would have a pattern over here, okay? That will say toggle the theme, and it would toggle the theme across the application. All right? That is what we are going to implement. And doing this by doing this, we learn how you can update the value of the context dynamically, on a event. Okay? So what I'm going to do first thing first over here is I'm going to introduce a state within the component. Okay? So over here, I'm going to say const o, and I'll call this as a theme over here. Okay? And I'll say set them this is This is use state. We are going to make use of use state hook over here. I'm going to say use state, and I'm going to pass in the default value as light. Okay. Now, when providing the value to the context, what I'm going to do is I'm going to get rid of this and I'm going to say theme over here. Okay. So whatever value this team has is being passed into the provide over here or the Context provider, okay? Or or into the context, via the provider, I should say. All right? Now, what I need to do is I need to introduce a button. So on click of the button, what will happen is a function will get triggered that will update the them value to light. So if it's light, it will convert it into dark and if it's dark, it will change it to light, something like that. So I'll say const toggle theme. That's what I'll call this function and I'll make use of arrow functions in JavaScript over here. And here, I'll say set theme Okay. So set theme is basically the set of function for this state, okay? Set theme, I'll say previous team. Okay. And I'll I'll say previous team. So if previous team is equal to light over here. I previous team is equal to light, I'm making use of ternary operator over here. I'll say I previous team is light, then assign it dark else assign light. So if it's not light, then it will keep it light, okay? Something like this. Okay? So Ti is the this is the entire code over here. Okay. So I'll just change. I'll just take this two previous line. And I'll save this. Okay? Now, this is done. Okay. I'll align this with a semicolon over here. I'm just making use of a ternary operator to toggle the theme over here, based on comparison. Okay? And I'll take this toggle theme, and what I will do is here in this particular component, I'll add a button click. Okay? So just before the component being added, I'll say button over here, something like this, and I'll say toggle theme over here. Okay. And I'll say on click. Oops, not on Can play on click over here, I'll say Toggle theme, and I'll save this. So you can see, I have this toggle button over here, okay? The current theme is light over here. Okay? I can toggle this to talk and light. You can see. So the context, the value inside the context is being updated. How is it being updated? It is being updated with the help of the state variable over here. So we have linked this state variable to the value in the context. So whatever the state variable has, okay? That is what is going to be displayed and passed on to the components. Now, one more thing I would like to mention if you are making use of this context across multiple components. So here, I'm passing it into this component component tree, I mean to say, I'm passing this particular context into this component tree. Via this team provider or the context provider, right? Now, if I have one more component three, and I'm passing in the same context to that component tree as well. Okay? Then if you're changing the value over here, whatever changes you're making over here with the help of this button. So that component tree won't be impacted because that is completely separate. And even though you're passing in the same context, okay? But you're making use of providers, right over here. So those two trees are separate. So this tree is separate. And if you create one more tree by passing in the same context over there, okay? The changes over here in this particular context won't impact the one over there because you're passing in the values through a provider. Okay? I hope this is making sense over here. Okay, so the reusability can be done or context can be reusable, okay? And you have to make use of provider to wrap the tree inside a provider. Okay? So yeah, I hope this is making sense as to how this is work. All right, I'll show this to you in a full screen view as well over here. Okay, so you can see Togo theme, Light tak. You can add some sort of margins or padding to the button over here. So in app dot CSS, I can say button over here. Button, and I'll say padding or I'll say margin, and I'll say five pixels. Okay, something like this. Let us see what this happens. Okay. There's some gap now, and this is toggling really well. Okay, you can see, right? So this is what This is how you can make use of states with context, and you can get the value updated in a context based on the value in the state change. Okay? I hope you have been able to follow along, and I hope this is useful. 21. Scope Matters: Exploring Context Behavior Inside and Outside Providers: Now, let me tell you one important thing about the context providers, right? So a context provider is used to provide a modified value to the component within its tree, okay? Now, what it's modifying, it's modifying the default context value. So here we have light, for example, we're creating the context with the default value of light, but when passing it to the provider, we can modify the value to dark and pass it, okay? So Context provider is used to provide the modified value to the components within its tree. All right? Now, this value is only accessible to the components wrapped by the provider and not outside that. Okay? So if you modify a value using a provider and pass it down the component tree like we are doing over here in our case, that modified value is not automatically available globally or outside the tree where the provider is used. Components outside the tree will either use the deferred context value or the different provider value if wrapped by another provider. Okay? Let me show this to you. All right. So what I'm going to do here is to demonstrate this that this context provider is used to pass in the value within that component tree and not outside that. What we are going to do is we are going to have one more component, okay? And I'm going to create one component, it's going to be called a global component. So I'm going to come at the bottom over here. Let me duplicate this thing over here. And at the bottom, I'm going to add one more component. I'll call this as global component. Something like this. Global component, okay. Rest all is same, okay? It's just a different component, global component, and I'm calling this as global component. And here, I'll say outside provider. Okay. Side, provide, something like this. Okay? So this is what I'm doing. I'm not I'll add some other water over here, purple, for example, and I'll see this. Okay? So this is a global component that has been created. Now I'll scroll up over here. Okay? And what I will do is I'll add this global component rendering over here, when rendering the GSX over here. Okay? So what I would do is over here just before the theme context provider. I'll first, I'll first have to make sure that I wrap this entire thing into a div, because the root has to be there has to be one root, right? I'll wrap this entire thing into this div. Okay? Now, within this div, what I will do is I will have a global component, something like this. Global component, I'll have a self closing tag. I'll see if this. Okay. You can see this global component up here over here. Okay? Now, if you see if I toggle the theme, you can see the current theme within the global component is light. Okay. And within the app over here or within the app hierarchy app component hierarchy, that there also it is light, o But global component is outside the hierarchy. You can see it's outside the provider over here. Okay? So it's not impacted by the provider. Now if I change, if I toggle the theme, let's see, you can see the current theme value is being updated only within the theme component or within this tree is what I should say, ok this tree that we have, but not outside. Even though it is making use of the same context, the value is not being updated. That's the point I want to make. Okay? Now, tomorrow, I can reuse this component, global component, and outside this provider in the end, I can pass it again and this time, I can wrap it into a separate provide over here. What I will do is I'll do some bit of wrapping over here, and I'll cut this global component. I'll move this inside a different provide over here. It's a different provider now, presenter. Okay. It's a different provider now, and over here, the value that I'm providing is dark. Let's say, for example. Okay. I'll say Dak over here. I'll save this. You can see this provider is different. It's having some other value. Okay? So I wanted to modify the default value. So what I did is, I added provide over here and I modified the default value to DAC. Okay? This one is using the default value. Okay? This one at the top is using the default value. There's no provider wrapped in, and this one is linked to a street. So this thing over here is linked to a street. Okay. So there are three usages of the context as you can see, okay? Now, if you toggle the theme over here, you'll see that it's only being toggled in the hierarchy and not outside the hierarchy. Okay? This is the point that I want to make over here. Okay? And this is really, really important if you are wanting to make use of the providers and you want to understand how providers work or what is the significance of having a provider, okay? So inside the provider, the context value is controlled and can be modified. Okay? So here, you can see this thing is having a provider. It's controlled, right, and it can be modified, right? The context value can be modified. And outside the provider, outside this provider over here, for example, this one, okay, the context fall backs to the default value or another provider's value, wrapping it up in the component tree. Okay? So it defaults to outside this provider, it will default to the default value over here, as you can see, current them is light and default value is light over here, right? So default value or if you don't want to default value, you create another provider and pass on whatever value you want to have. Right? So that is how it works. And the toggling within this provider is not impacted because the global component over here is not part of this componentry and neither it is wrapped inside this provider. Okay? I hope I'm able to make a point over here and I hope you are clear as to what is happening. Okay? So if you're modifying a value using provider and passing it down the componentry, that modified value is not automatically available globally or outside the tree where the provider is used, okay? Components outside the tree will either use the default context value like we're using over here, the global component, or they will use a different provider value if wrapped pi under the provider like we are doing over here. Okay? But the value inside this tree is not available outside, right? I hope this is clear and I hope you are able to understand this point. 22. Custom Hooks 101: Crafting Reusable Logic in React: Hey, there. So now it's time that we begin talking about custom hooks in react. Now, what is a custom hook? So custom hook in react are functions that let you reuse logic across multiple components. All right. Now, when you're building applications with react, there are components, right? So here we have one component, okay? So it's a very simple component that is returning custom hooks in the header or using the H one tag, right? Now this is one component, but in real application, you might have multiple components and you might be making use of a lot of logic across different components. Now, if there is some sort of a common logic that exists across your component, what you can do is you can convert that or encapsulate that logic into a custom hook, and you can reuse that hook across the components in your react application. Okay? Now, you have inbilt hooks also, right? And here I do have a couple of input statements at the top, use context, use state, use effect, okay? These are all the inbuilt hooks that you have, okay? And these are designed to give functional components. So functional components are the components which we are defining using functions, okay? So these are defined to give the functional components, the access to features like state lifecycle events in context, right? And they are standardized, defined by react, and they're optimized for common set of tasks, right? So these are in built which you are importing and reusing in your components, okay? But tomorrow if you want to reuse some sort of logic, you can even create your own custom hook, which means that is user defined hook, okay? And whenever you are defining, the syntax basically is it should start with this use over here. Okay, should start with use. So it can be used component or use EPI or something like that, whatever you want to call it. Okay, use counter Okay, so it should start the normal convention is basically starts with use. Okay? So what are custom hooks? These are functions that you create yourself to reuse the logic across components, okay? And that is what it is. You can think of it like a recipe, okay, which is nothing but a set of common tasks or specific set of operation that you want to perform. And you don't want to repeat the code across multiple components, so you just define it once and reuse it everywhere. Okay? Why are these needed? So, of course, one major reason that you could get from the definition is reusability. Okay? So it allows you to reuse a lot of logic. It allows you to remove a lot of repetition and it helps you organize your code in a better way. Okay? There are a lot of inbuilt hooks also that we already aware of. You must be aware if you're building with react. So these are all the inbuilt hooks. Like, some of the hooks I have added at the top, create contexts, use context, use state. Okay? So these are inbilt hooks, and custom hooks are the hooks that are user defined. Okay? Now, one question that you might think right now, o? So looking at this definition is how are these different from normal Ja Script functions? Functions are also blocks that you can define once and reuse in your application. Why not just create functions instead of hooks? Why does this concept of hooks exist in first place? Hooks are different when you compare it from functions over here. Now, how are they different? Now, custom hooks can make use of react features. Now, when I say react features means custom hooks can use state management, like use state hook to manage component state, which normal JS functions cannot. Okay? Custom hooks also have life cycle control, so they can make use of use effect hook to handle the side effects like data fetching, and normal JS functions cannot. Okay? There is a lot of reusability involved over there also. Yeah, custom hooks basically follow react rules for hooks and ensure a consistent behavior. So that's the reason why this concept of hooks is different. Like this concept of custom hooks, essentially is different from that of normal Jascript functions. Ja Script functions are limited, okay? But when you want to have a react specific set of reusability, you come to custom hooks. All right. So I hope this is making sense. Now, what I would do is I would get rid of these input at the top. Okay? These are not actually needed at this point. Now, what we will do is we'll go a little bit hands on and create our own custom hooks. Okay? So what we will do is we'll first create a counter component. This is a component that will help us display in normal counter with two buttons increment and decrement and you can decrement the counter value as well as increment it. Okay? So this is the component that we are going to create a very simple one, and then we are going to extract the logic of counter into a custom hook, and that will enable us to reuse the counter across multiple components at multiple places. So that's something that we will explore. So let us begin with this. It's here what I have is a simple react project, wheat react project, I would say. I have main.j6, as you can see, which is rendering app over here. And here, if you come, this is app dot JSX. Okay. Now what I'm going to do here is to begin with the counter thing, I'm going to have a state over here. So first thing first state, I'm going to have count over here, set count, something like this, and I'll say use State Okay. And I'll add zero over here. Okay. So this is our state over here. I'll add two functions. I'll say increment. This is one function. It's a arrow function that I'm creating over here. And actually, I don't need to add curly braces because there's just one line of code set count. Okay? And I'll say count plus one. Okay, count plus one, something like this. Okay. And I'll have a decrement as well, decrement function. So this is increment, decrement. Okay. And instead of incrementing over here, I'll just decrement this minus one. Oops, not into, it's minus. All right. So this is done. And now over here, I'm in header. Here I'm just going to say count, and I'm going to display count to something like this. Okay. And sort of H one, I'll keep this as H two. And I'll see if this you can see count of zero, and over here, I'll have a couple of button. Okay. So the button tag, I need to add button. I'll say this is increment button. Okay, and on click, I'll say increment here, like so. Okay, this is one button. I'll add one more button here. So this is it, and I'll say decrement. Okay. Decrement, something like this. So yeah, this is the counter we have now. If you increase the counter, you'll see it increase, you can decrease it as well. It'll go to negative as well. Okay? A very simple counter is what we have created. Okay? Now, what we will do is we'll extract a counter logic into a custom hook and we'll make use of the custom hook into our application. Okay? So let's do that. So first thing first, I'll extract it into a separate file. Okay. So I'll have a file over here under SRC. I'll call this file as we can call it as use counter dot JSX, something like this. Okay. And over here, I'll just replicate a lot of code that we already have. So I'll just copy this entire function thing over here. Okay. This and I'll paste it over here. Okay. Now we'll trim it down. Okay, I need to add an import, which is use state at the top. Okay, use state has been imported. And here, instead of function, this is use counter, and I need to export use counter, so I'll say export, default, use counter. This is done. Okay. And what we need to do is we're making use of State over here. We're making use of increment, and when returning, we don't need to return the JSX, this JSX. This is not something that we'll return, but what we'll return is we'll return the count. Okay, so we'll return count. We'll return increment, and we'll return decrement, something like this. And this won't be a round bracket. This will be equally bracket. So yeah, this is done. Okay, so I think we are all sorted. Okay, we are creating state. We are creating increment, decrement, we are having count, and we are exporting use counter. So this is a custom hook that we've created where we are actually having some logic, and we are making use of react related features, you can see. We are making use of states and all, right? And that is something that we are returning as well. Now, over here, if you come to app dot Jx, what we need to do is here we need to make use of the hook that we have created. Okay? Because use counter, if you take a look at, it's our custom hook that is handling the logic of counting. It is managing the state, and it is returning the current count along with the increment and decrement functions over here. Okay? So we need to update the counter component over here that we are having in the app. The component name is app. And it is representing counter. So we need to update this to make use of custom hook. So what we will do is I'll get rid of all of this. We don't need this. This is move to the custom hook, and I'll instead say const I'll say count. I'll say increment, I'll say decrement, something like this. I'll say equal to, I'll say use counter. Like so. Okay. And yeah, this is it. We're making use of use counter hook. I don't need use State now in my application. So you can see the moment I said use counter over here, okay, the input statement was added at the top over here. You can see this input statement. Okay. So you can see how now this code has become a lot more easier to manage. Okay? I can save this file. I can refresh this, and you can see nothing changes in the output. It works absolutely fine. Okay? So what we did is we replaced the internal stet management of counter component with our use counter hook. And this makes our counter component cleaner. And reusable for any sort of logic related to counting. Okay? Tomorrow, let's say if you want to make use of this component across multiple or tomorrow if you want to make use of this functionality of counter across multiple components. What you can do is you can have a counter created like this use counter. Okay, there's a hook, which is doing the management of counting things, right? And you can import this at multiple places and use it across different components. Tomorrow, if you have to update this counting logic, you don't have to go and figure out, oh, which components are using this, let me check. Have to just update it at once in this particular file. The moment you update it at one file, the changes is reflected across everywhere. So that's a magic of reusability, as you can imagine. Okay? So what are custom hooks? Custom hooks in react are functions that let you use logic across multiple components, and they start with use over here. That's a convention. All right? I hope this has been useful and I hope you have been able to follow along. 23. Enhancing Functionality: Updating and Refactoring Custom Hooks: Hey, there. So now what we are going to do is we have this custom hook that we are making use of over here that we created. It's a use counter hook, which is helping us manage the count and the functionality for the counter. And we are making use of this to display over here, right? And you can reuse this in as many components as you like, this use counter hook. What I'm going to show you is how you can update your custom hook to add more features and how it is reflected throughout. All right. So here in this counter, what we are going to do is we are going to add one more button, which will be the reset button that is going to reset the count to an initial value. All right. So over here, what I will do is we will have initial value. So here in this particular hook, I will accept initial value. Okay? So I'll say initial value and oops, initial value, and it will have this zero as a default value over here, and over here, I'll have reset. Okay? So I'll say const, I'll say reset, Okay. And I'll have an arrow function. Okay, we don't need curly braces, so I'll say set count over here and I'll reset this to initial value, okay, whatever it is. Okay. And instead of initializing the state over here to zero, I'll initialize it to initial value because we are now getting the initial value as the parameter. Okay? And, okay, I may stay equal over here. All right. This is reset, and what we would also do is we would return this reset over here. So I'll just say reset here, something like this. Okay. This is done. Now Reset function has been added over here in the return, and what you can do over here is you can add a button. Okay, so I'll add button. And this button will be reset button, and I'll have reset function. But the problem is reset function is not being declared over here, so I'll say reset, something like this. Okay? So yeah, this is it. We are all set and we'll also pass an initial value since it now accepts the initial value. So initial value will be zero right now. I'll save this, and you can see the reset button has been added, okay? Now I can increment, I can decrement, and I can see reset. Okay? So you can see how the functionality is working fine. Okay? Now, whatever initial value you set, the counter will start from that initial value. So if I set the initial value to data of ten, the counter will begin from ten. You can see count is ten. Okay. And you can increment, you can decrement, and it will be reset to the initial value that you passed in with. Right. So this is how you can update the hook basically to add more features, and whatever updates you to are reflected across wherever that particular hook is being used. Okay? So that's the beauty of making use of custom hooks. I hope this is clear and I hope you have been able to follow along. 24. Course Conclusion: And that brings us to the end of this exciting journey into the world of react hooks. We've explored how hooks have revolutionized react development, enabling us to write much more cleaner and more functional code. So from mastering the basics of use state and use effect to diving into the advanced topics like use context, use ref and custom hooks, we have built a strong foundation for modern react development. Along the way, we have also created real world projects like color picker, mouse tracker, and digital clock. And these projects have helped us showcase how these concepts come alive in practical applications. But remember, this is just the beginning. The power of react hooks lies in their versatility and adaptability. I encourage you to continue exploring further experimenting and building new projects with the knowledge that you have gained in this class. So this will help you explore the innovative way to use react hooks into your future projects and application. I'm so excited to see how you will apply these skills to create dynamic and responsive applications. Remember, learning is a continuous process and react provides endless opportunities for growth and creativity. Don't forget to complete the course projects that you get with this particular class and share it with the entire class in the project section. Your projects will not only solidify your learning and understanding, but also inspire others in our learning community to do better. Thank you for being such an engaged and enthusiastic group of learner. I hope this course has not only enhanced your knowledge, but it has also inspired you to push the boundaries of what you can achieve together with react. Happy coding, and I would like to wish you all the best in your react development journey.