 Okay, just setting up a couple things here to get ready. We'll start in a couple seconds actually. So we'll start at nine o'clock. Let me adjust things. Everything's out of place since I got back. So kind of readjusting to life after the conference. Turn those off. All right, awesome. Thank you so much for showing up. I got a chat going on if you have questions about what we're doing. My typical approach with these is just to just kind of honestly explore the stuff. I don't really know exactly what the direction is that we'll be going, but yeah, I just wanted to explore use state today. So there's a bunch of hooks, but today my goal is to explore use state, kind of bump around the boundaries of it, give it its full do and not just kind of make assumptions about what its limitations are. So I'll be playing with that. I was kind of thinking through what my strategy for this is and I wanna just kind of explore each of the different types that you might be able to put in state. So I'll do those. And then I was thinking that kind of interleaved in those I would work on the abstractions. So what it would look like just using use state directly but then also abstracting that what that would look like for each type. I think that's it. Hey Benjamin, how's it going? Thanks for being here. So yeah, so that's my goal. We'll look at the documentation. I figured I'll probably just start just jump right in and see what I know so far. And then I'll kind of look at the documentation for anything that I missed. Yeah, so that's the first thing. That's first things first. So I guess what I'll do is I'll start with a number. I think that's the easiest one to start with. So we'll just get that going. I apologize. My fingers are not exactly warmed up yet. So let's see. So we're gonna just put one in a span here. See style. Make this big. Font size. 32. Okay, cool. Big number there. I'm gonna change. A lot of button. Type button. I'll say increments. Oh, those fingers. Rough. Okay, cool. Let's change this to a diff. I know it's not semantic, but I just want them on separate lines. Okay, so we press increment. It doesn't do anything because we haven't hooked it up to anything. So we can then import useState for that. Then in our function component, we can say let count, nope. Let count equal useState. And we give it an initial value. So in our case, actually let's set it to one since that's what we have already. We'll use count there. So count is hooked up now. Change that to two. Changes the value. Need to remember not to save every time I do something else I'm gonna get set up to the top and code sandbox. So, yeah, so three. Okay, so let's change that to zero. So we'll get kind of like an honest to goodness click counter going on here. Okay, cool. So we got the count, but clicking this doesn't do anything. We need to set an on click handler here. Give it a function that calls, calls what? Calls this function our updateCount function. And what we're gonna do is we're just gonna take a count, the same value that we have here. Remember, we're just gonna add one to it. Oh my goodness, these fingers. Now, we need to peel out that updateCount function as that set, it lives in the second position of that array. So I know that this is new to a lot of people. So I'll kind of like cover that just briefly. I did that in a previous live stream. Anyway, this is all hooked up. So we can see that this works now. So this is great. We, let's see what we did. So we imported useState. So these are the parts imported useState. We peeled off these values from this array that useState returns. So we called useState with a default value of zero. And then we set variables for these values, which we'll talk about in a second. We use count to display the count and we use updateCount inside of an anonymous function in response to clicks. And we just use count plus one. So now in set state previously, you would have to kind of take, because it's asynchronous, you would have to write a function that takes the previous values and then you would use that to like kind of infer the next values. This is significantly easier because all of that is abstracted away for you. And like this count every time this gets re-rendered is going to be the right count. So that's really nice. All that goes away. Let's talk for a second about this syntax here. So the way this works, actually maybe I'll do it outside of this. So the way this works is that you can assign, so you might be familiar with array literals. I hope you are if you're going through this. So array literals would look something like this. So we could define something like useState. Everything's going to break if I do that. Underscore useState equals, and we would do an array, zero, and then some anonymous function that updates zero. Update, count here. Nope, value. Okay, so we'd have some code that does that. Then we can, so we can use destructuring assignment to pull off the values of this. So we know that useState, or this underscored useState is an array. And so we can use destructuring assignment, this kind of inverted version of array literals to peel those values out. So useState. So we say we know that useState's an array with these values inside of it. So we're going to do the opposite. We're going to say, we're going to take useState and we're going to destructure it into values that we want. So this, and we can name these on the fly. That's the really nice thing about this array is that we can call this count or value or whatever. And then our updater, right? So that's really nifty. Now imagine if this was not, imagine if this was an object, right? So some people said, why isn't this an object? So imagine that this was an object. You would have to, you would have something like, it would look something like this coming back to you. Value, zero, updater, new value, and then it does something, right? So I'm not going to implement it. I just want to show you what it might look like. So then from here, we wouldn't be able to name them by themselves. We'd have to, if we used object destructuring, we'd have to take value and updater. Now that's fine if you're only using one piece of state, but if you had, as they showed Michael and then Chan as two different pieces of state, sorry, ignore everything that's going on over here. Now I can't assign these, right? So I would have to do something really irritating like first name, and I would have to reassign those values. So first name up or update first name. Keep wanting to call it first name updater. So I have to do that in order to kind of avoid this naming collision. So I think that array destructuring is actually a really nice choice, despite the fact that it looks kind of uncommon at the moment, because it expects you to name those. Now, one thing that I am really curious about, I've been curious about this for a moment. I'm curious if there's anything else that gets passed to us. So I'm gonna take that whole array and log it out. I'm gonna give it some, another state. So see, let stuff, actually, I think we can just log out console.log use state of zero. Okay, cool. So it looks like all we have in here are the two elements. So we have the value and then this bound dispatch action function, which is what we expect, no problem. So nothing hidden in there, that's fine, that's great. Maybe there will be in the future, who knows. Yes, yeah, it is super cool Benjamin that you can rename those on the fly. It's really nice. It's really weird at first to see array destruction because it's so uncommon, but I totally agree that it was the right choice for this. And I think tuples like that are a little bit more common in other languages. So yeah, let's see. So we have that. Everything looks in place. So we have our counter and I wanted to look and see what it might be like to extract this into a custom hook. Now, I don't think that's necessary at this point, but I just wanna explore the boundaries of it. So I think that we can create a custom hook just by saying function use, and these are all use prefix. So when you create a custom hook, use is the kind of indication that it is intended to be used as a hook. So use state, what we're gonna say is use click counter. So we're gonna call this. We're gonna take an initial value or initial count. We'll set that to zero using the, I can never remember the name for this, but it's like default parameters, I think. So if we don't, if we get a value, it'll be whatever the value is set to. If we don't get a value, it's set to zero by default. And then I think we're going to use this hook. So we'll just copy this out. See, so we have, so we're using this hook, we have count and update count, and now we're responsible to return the values that we want. Okay, so I think what I'm gonna do is I'm gonna actually, well, let's do something else first. Let's just return them as they come back to us. Can I do that? Okay, count is not as fine. So now we're gonna use our custom hook, use click counter and give it, so actually we can use nothing now. Let's equal count update unexpected token. Oh, duh. Okay, let's see if this worked. Cool, okay, so that worked. So we have extracted out this custom hook. All we did was basically lift up what we were doing here. We added an initial value. Oh, shoot, I need to change this to initial count. Let's make sure that works by passing 10 in here. Cool, yeah, yeah, so that works. Okay, awesome. Okay, so the next thing that I wanna do is just kind of explore. So one of the things that Dan showed was that you could return values that you could then use to spread out on forms and whatnot. I don't necessarily think that that's a particularly valuable thing to do here because, unless we have this button, I guess we could do it here. Let's see, how would that work? We would have to do something kind of silly. This would be like really want, actually I'm not gonna do it because it just doesn't make sense. We could do it something like we could have this be children and then this be on click, but that seems kind of silly at this point. Anyway, but it does make a lot of sense for those form inputs. So I'm gonna do one of those next. So I kind of consider this done at this point. We have our custom hook that we're using. We can pass in an initial value like we did before. This is how we handle taking that initial value. It's just function arguments and we have a default parameter. We use use state as we would and then just return those values, perfect. There's nothing special. You don't have to return, like you don't have to destructure the array. So we could just call this, I don't know, let's just call it state. Because I'm not using those values, I can just pass them along as I get them back and then destructure them in place here. So that should still work. Yeah, perfect, okay, cool. So that's the first part, excellent. So that's with numbers and a component. Let's do some other things. Since we were talking about strings, let's do a form input. So something that's really nice is we can do, let's set up a form input just using use state directly and then we'll extract it. So let's see, so we do input type text value, does that work? Right, and this should not be editable, perfect. Cool, clicking tab and stuff, it doesn't work. And then on chance. And then on change, let's say any change that we get, I'm going to, let's see, how does that work? Do you take like E the event and do, okay, so I'm gonna need some state here, no matter what. So we're gonna have something like handle change. Okay, that's not defined yet. So we gotta, let's use our state to define that. So we have m, let's see, let value and update value equal use state of genitastic. So I'm gonna just do this one piece at a time. Value, so this should be genitastic now, okay, cool. Doesn't do anything. So we pulled update value out and we will do this. So on change. Now I'm gonna need to take a function because I don't control this yet. I can do it with a custom hook, but I don't control it yet. And so we'll say take E and let's see, how does this work? Oh yeah, so we'll do update value of E, right? Value of E, right? New E, oh my gosh, it's such a new target value. Okay, cool, now it should work, perfect. Okay, awesome, okay, so that works. So we just used, I mean, again, use set state. This time we're doing it with a string, so this is kind of the second part of our experiment. Value and update value. Now again, we can call this anything that we want and so kind of like moving along this, kind of moving towards that example that Dan showed with forms, we can do, was it on change? Oh my gosh, so we have update value on change. Now, so we've, again, we can rename these whatever we want, so that proves that we can name it whatever we want. Now unfortunately, we have to handle this so we could pull it out into a function outside of all this or we could define a function in here. All that's fine, but with these forms and these strings, we can do something like really cool, which is to just spread out this value and this on change, but we can't do that when we have to kind of do some specially handling for that value that we're gonna get back. So let's take this and extract it into a custom hook. So what would we call this, use value maybe? I don't know, let's go for it. I don't have a better idea. So we will take an initial value, use default parameters to set that to, I don't know, empty string, I guess, just so we can be sure to call functions like two string on it, because otherwise this would be, if we didn't pass in a value, it would be undefined. And if we tried to call things like two string on it, we would have some problems. So I'll just set it to an empty string and then someone might throw in a number and then we solve those same problems, but at least I'm kind of covering my butt here a little bit. Again, we take this, move it up, use our custom hook. So we're gonna, right now I'm just gonna pass it. I'm just gonna do one change at a time, but we'll kind of like see the different things happen. So let's value and on change equal use value, turn, okay, so I need to change this to initial value. Okay, cool. So the initial value should be empty string. So everything works as expected. Cool. Now for that kind of special trick that we can do. So on change, so let's see how we need to do this now. So if we wanna handle all of this locally, we can define a new function. Actually, we can take that from here. So what are we gonna call this update? No, I'll call it handle change. I'm just figuring this out as we go along. So, okay, so handle change, nice. You're probably screaming at me. Okay, change that to handle change. So right now we're returning value and handle change, which kind of is an abstraction over on change, which is going to pull out the event and pull the specific text out of the event. I think that should work. Yes, okay, cool, still works. Okay, awesome, so this is fine. We have basically brought this into our, we've brought this implementation detail of pulling event.target.value into this, but we can make it a little bit better, which is super cool. So right now we have value, value, and on change, on change. That duplication is kind of sticky. Luca. Yeah, yeah, yeah, I just wanna return value and on change. I'm just doing it kind of piece by piece so we can see it all happen. Yeah, okay, so we have this and what I wanna do is basically spread out these so that I don't have to. Now, right now those exist in an array and so I can't spread those props. I need an object to spread those props, right? So what we can do is we can change this. So let's start with what we want it to look like would be like this. So we'd say, see, I don't know what to call this, like hook values. I just call them values. Okay, now that's not gonna work because I don't have that values assigned. So I'm gonna get rid of this and then what we're gonna do is we're gonna change this to an object. See value is gonna be value and on change is gonna be handle change. So this just maps this. So basically on the way out, it's binding handle change to on change. So on the way out when we use it, it's handle change, it's on change here even though we're calling it, we have this handle change function here. Let's see if that worked. Oh my goodness, it works, cool. That's awesome. So now we should be able to duplicate this form without like, so this is really handy, right? Because we can duplicate this form now. So let's call this first name. This will be Michael. We'll do last name, Chan, pick name, fantastic. Okay, so values is no longer there. So we'll make this first name. Perfect. We'll make this last name. Make this nickname. So cool. Oh, tab over. All these work independently. That is super neat. So I guess for the sake of review, we have, again, just starting with use state on all of these. Man, my nose is stuffed up. So I'm like breathing through my mouth all like crazy, like an idiot. So we have You hear that? It's like super, just the winds have been kicking things up. It's just gross. So as I'm talking, I'm just like getting out of breath. So we have input type text, no problem. We have, and then what we're doing is we're, okay. So anyway, back to the code. So what we're doing is we're using this custom use value hook that we've created. This is a custom hook that takes a defaults parameter. Now we've set this default parameter. So I think things should, let's see, nevermind. So we're using our use value or creating a use value hook. It takes an initial value. We set the default parameter to empty string by default. So we can call methods like two string on it without concern. And then in here, we use a standard use state passing it our initial value. We then pull off the value and on change. And from that array, we have a function called handle change which we just use to abstract around needing to get this value. So we take the event and then we call the on change that was passed to us from use state with the new text that we want to call it with. Okay, no problem. And then what we do is we return an object with the value here. And we remap handle change to be called on change. And the reason we do that is because now we can spread those out here. And I'll show you kind of, I'll explode one out using destructuring assignment for nickname. So you can kind of see what's happening. So we would have value if you're not familiar with object structuring. So we'd have value and we'd have a, sorry, nickname. Oh, no, no. So we had a value which we would take as, we'll just take it as value. And then we would have on change. Sorry, brain fart. Now we were spreading those, we were spreading those out but now that we're kind of destructuring them here we can't spread them out. So the way that looks literally is value, value on change, on change. Cool. So that still works. You can see that. And all we're doing with this syntax is spreading out what lives in these, which are these here. So this is the literal version of that. Okay, cool. So we did, let's see how far we, oh, 28 minutes. I'm not moving very fast. So we have, so we've done strings, we've done numbers. Let's move to, let's do objects, I guess. Now I don't necessarily think that you're gonna use objects a lot here. It's really nice to have like these different values. Let's see, I'm trying to think of a case where you would use an object that you wouldn't use something like use reducer. In which case, I think I'm gonna skip objects unless if you have any objections just let me know and we'll cover it. Just know that you can use objects here if you want to. I think they're gonna be overly complicated because you're gonna have to kind of produce all of these updater functions by yourself, in which case it'd be way better to just use use state or use state with simpler values. So I'm gonna skip that and we're gonna go to lists. Lists are actually pretty cool. I haven't actually done this, but I have a bunch of ideas that might be interesting. So let's work with arrays. So let's see. Again, I don't know where I'm going. So we'll kind of figure this out as we go along. Let's call it, let's keep. So let list, I'm gonna just use the generic term. I don't know, these might be to-dos or something. Change that to an unword list. What's this gonna be? This is gonna be list.map. We're gonna take each item and return a list item. Okay, cool. So that puts that all in one line for us. So we have a list item. We're mapping over that, sorry, an unordered list. We're mapping over the list and just returning a new array with list items for each item. So if we add one, two, three, four, we can see that that is all hooked up to work. So if we had an input, oh, I just deleted my fragment. What was I thinking? Okay, so if we had an input, let's say we wanted to add something to the end of this list. So input type, text, change, no. Do we have to add a form? Oh my gosh, you're about to see how little I use forms in React, at least forms like this on submit, I think is what we need to do. It's been so long since I've done this. I work mostly in making kind of front end tools and like design systems. So I'm actually submitting forms a lot. Let's see, so console.log, let's see if that, but yeah, I think we need to keep that on state. You pissed. Okay, I'm gonna add stuff, just one off, or you can kind of tell me how to do it, but it's complaining about that. So I'm gonna add a key here, which will just be the item. I know right now they're unique. They might not be in an app, so ideas are always best. Log gets cleared out too fast for me. Oh, let's see, on submit. I probably need to prevent default or something. Oh, I don't need this form. I'm so sorry right now, so sorry. We're just gonna do something really dumb. So on click, we're going to, I don't even care about what the event says. I'm just gonna add four. And so we're gonna call, so the question for me would be, how would I add four to this list typically? Oh, I misspelled default, thank you. I'm just gonna move on and make it literal, but yes, thank you. I tend to do that, I don't know why. So what we'd have to do is, we'd have to update list, and then we would see how would that work. So we would take our previous list, I would call concat on it, and add four. So we basically, right now we just have a button that adds four, so I'm actually gonna put that, add four, reference, update is not update list, sorry. Cool, perfect. So this is how that would work. So now we have our updater, and we can do anything that we know how to do. Unfortunately, sometimes some of these methods can be kind of like complicated. So like if we, let's see, so how would we do this? So we could do all kinds of things, so we could return, so instead of doing this method, we could just return a new array with all of the items spread out over it, and four, that still works. Now if we wanted to prepend something to the array, we could do that like this, and just put it at the beginning, right? All right, let's change this to, so now four goes at the beginning of the list. So what we could do is that, obviously this is not too difficult, it does get kind of tricky. Let's see, so what I wanna do is, let's say we wanna do like, let's see, I can't see my, there we go. So let's find out the code for how to do, this is something that I literally have to look up almost every time that I do that, I'm not ashamed to admit that. But let's see, I think it's also on like the redux instructions, if anyone wants to, oh here it is, okay cool. So if we wanted to insert something. Now I'm gonna be just doing kind of like a bunch of the literal stuff, just doing it, handling it literally if you wanna make it more dynamic, but that's up to you. Anyway, so this is something that I want to kind of, if I don't wanna have to look that up every time and like risk creating an error when I do it, it'd be nice if I could abstract this and I think that hooks could give me a way to do that. So let's start by just pulling this list out as a hook. We'll call this use list and we will take array as the initial list because we're gonna be calling a bunch of methods on it. We wanna make sure that we have an array. Let's see, so we're gonna again, just move this up here. I think that we will want to split these out because we're going to be having, we'll have places where we're gonna be calling methods on list, so we might as well just kind of continue having that split out, but we'll return list and update list. So we'll pass those through so that it's effectively an invisible thing to anyone using our API. Oh, Sid retracted a message. Is it because I didn't, I said I wasn't gonna do something. Okay, so now we need to use our abstraction here or custom hook. So we'll say let's list update list equals use list and we're going to see take this here, delete that, change that to initial list and then pass in our list. Perfect, so that works as expected. So everything is working fine. I can add for again, it adds it to the front of the list. Again, I have control. Let's see, Sid, oh, whoa, you're talking to me. Okay, good to see you, Sid. I always love seeing you here, thanks. Oh, he's saying that I should import demo styles. You don't like the empty, the no-styled HTML, I'm sorry. Let's see. Okay, let's see. So we have use list, so again, so we've just created this abstraction around this list. Right now, it's not actually getting us anything that we wouldn't be able to get just by using list directly, but it still works. We can add for or maybe not, what do I do? Oh, I'm just returning, I'm just spreading out the list. Ah, span. Okay, so we're gonna add for and we can keep adding for if we want. So that is fine. Now, what would happen if we were to, basically, we could add some methods here called like append or prepend or insert. So let's kind of start thinking about that. So first of all, in order to do that, I don't want an array that's going to just keep growing in arguments, that'd be really ridiculous because in order to get to prepend, if it was after append, you'd have to destructure all of the values off before it. So that's ridiculous. I want you to have, just be able to pull off the things that you need. So what are we gonna do? First, we're gonna change this to an object. So we'll change list. We'll just kind of use that with a standard punning. Actually, wait, how should we do that? Yeah, let's keep it list for now. So you'll have to destructure off list. You'll have to know that API, but whatever. Might be best actually to change these to value. Who knows? So we have value and update value. So we're gonna have to change these. Um, value. And if I want, I can kind of rename these in place to, so I don't have to update my code down here everywhere. Okay, still work? Yeah, still works. Now, what I wanna do is, effectively I want to add an API that allows me to append. So let's see how that would work. So instead of update list, I'm gonna call append. Now that means that this is going to go away. I'm gonna append just for. We're gonna take a value and how does that work? We're gonna call update value with, ooh, okay. So let's see, I'm gonna, so I kind of shot myself in the foot by calling this value. So I'm gonna change it back. I'm just learning. Again, I did not really think this through beforehand. So append is going to be value. So you're getting the freshy, fresh thoughts from me. Cannot read map. Oh, duh. Okay, so I just need to add that into my object. Cool. So now I have a function that, so I've created this API that does this thing where it takes a value and adds it to the end of the list, which is great because now I don't have to do that work, which is awesome. So let's try adding a prepend. So let's add another button. So we'll say this appends for, this will prepend zero. Let's see, 45. We're at about 45 minutes. So I'm gonna finish doing this, but if you have any questions, just queue them up in the chat and I'll try to get to those before we hit about an hour. Because I know the Apple Key Notes today and so if you're an Apple fan, you're gonna be leaving this anyway, I'll be leaving this because I want those sweet new iPads and the new Mac mini. So let's see if this works. So we have append and prepend. So I'm gonna call the prepend function, which I don't have yet, but I'm going to destructure that off of my custom hook and I need to add it to my custom hook and I need to add the implementation, prepend. It's going to take, put the value at the front of the list before spreading it, before spreading the rest of the list out. So we can add, we can append for, we can prepend zero, oops. Okay, append for, prepend zero, perfect. So we're seeing that all starts to take shape, which is really nice. So pissed. Why are you so pissed? Okay, cool. So that is working. Now let's get back to kind of before we end. I wanna get back to this cluster, which is the insert, that thing that I'm always having to look up every time I write this insert method. So what we're gonna do is, again, you can make this more dynamic, just for the sake of demonstration, this is, these are very literal buttons. But honestly, once we have this set up, you can kind of build your form however you want. So we're going to insert two point, actually no, we're gonna do 3.1. An homage to my friend here, 3.1. Okay, so we're gonna insert 3.1. And we're gonna insert, I can never, okay, so this is zero, this is two, this is three. Okay, let's see. So let's get this implementation here. So I just copy this right off of Stack Overflow. So insert is going to take an array, we don't need to take an array. We're gonna take an index and a new item. So the array is going to be list, list. So we're just changing that to be the list that we get from set state. The index is what we're getting here, perfect. And the new item gets sandwiched in the middle. So if you're not familiar with what this insert function does, is it takes all of the items on the array, it spreads, creates a new array. It spreads off all of the items of the array up to the index, inserts the item that you want to insert and then it spreads everything after the index. Okay, so we have that. Now we just need to add that to our object here at the end, insert zero. Now we need to give it an index. So if I'm not mistaken, it's gonna be zero, one, two. So we're gonna insert it at two, maybe, I don't know. So we're gonna prepend zero, append four and insert. Oh, insert, so insert is not defined. I didn't take it off, I didn't just structure it off. So prepend zero, append four, insert 3.1. Nothing happened, nothing happened. So insert 3.1. Okay, so let's see. I did something wrong here, obviously. Oh, thanks Matt, I appreciate it. I hope that they're helpful for you. I'm just like, honestly, just kind of exploring to try to see, like learn some of these things myself and whatnot. So I thank you for sticking around. If you have any questions, let me know. I'd be happy to cover whatever or bump around the edges of whatever. So yeah, so we have, let's see, so we're spreading out the, okay, so we're taking the list, index, I'm passing. Oh, I have the arguments flipped. Yes, thank you. So let's see, so is that, let's see, what would be the right, let's just flip them to be this order. I'm not sure what I would want the API to be if I were actually making this as a custom hook. So let's start with this, 3.1. No, I was in the wrong order. Okay, yep, so this is two now. So zero to two. Let's just, let's make this literal for a second and see if there's something else that I'm getting wrong. List, new item, okay. So we're gonna do something else. We're going to debug this, let insert. So let's just make sure that this gets called. Okay, it does get called. Oh, I'm seeing chats. Oh, duh, yes, thank you, Adam, yes. And Luca, I appreciate that. Yeah, I'm just, I'm not updating state. Thank you, thank you, thank you. That was about to get real embarrassing for me. Okay, so I need to update state with a new array. So update value with a new array. So okay, cool. And I changed these to be literal numbers. So this is gonna be index again, index. So that should insert. Looks like I got that number wrong. It should be three. Okay, so we can insert 3.1, append to the end, prepend zero. Awesome, cool, we did it. We did it together. Thank you very much for that. Yeah, mob programming. So let's see, let's see. So I think that's it. So the big thing that I wanted to show you with lists is that we can actually abstract a lot of these helpers when we're working with arrays, which can actually be really handy. Cause again, I forget the implementation all the time, mostly just because I always forget how to interpret where the index is cutting things. Like if it's beginning or end, I should just commit it to memory. But the point is, is that if I had a use list, I wouldn't necessarily have to commit it to memory. I could just use insert. Now, whether or not you think abstractions are good or bad is totally up to you. This is just a demonstration of what you can do with use state. Anyway, yeah, I think that's it for me today. I just wanted to kind of go through use state, just use state, play with the different types and yeah, kind of see what the boundaries are. Yeah, that's awesome. Yeah, if you're interested in more videos like this, I'm gonna be doing the same time every day for the rest of this week. I'll probably be doing use effect tomorrow. That might start with something easier cause use effect is kind of the workhorse. Yeah, I'm gonna be doing use effect tomorrow maybe for a couple of days and then whatever. So if you want, you can subscribe to the channel. Otherwise, if you follow me on Twitter, I'll be kind of tweeting those out as they go live. Or you can just remember that it's gonna be tomorrow and the rest of the week at exactly this time. So yeah, thanks so much. Let's see, Luca was saying, I'm kind of worried that every time the set state is called, the entire code and custom hooks gets called. Yeah, we can look, yeah, I don't know what the answer to that is, but yeah, in this case, it's definitely all of this stuff is getting called because the component is so small. I imagine that it's probably controlled by kind of the component tree, depending on if that part of the tree gets updated or not. I imagine that it would probably be isolated to this section if this was just like isolated part of my app, but who knows. Yes, absolutely. Yeah, always gotta be careful of the code we put together. Yeah, so, and yeah, so we'll be exploring like use memo and all those other APIs kind of later on, but I wanted to get some of those like basic ones like use state and use effect, since those are really the workhorse ones to get a solid understanding of those where the boundaries are and whatnot. So yeah, awesome. Thanks so much for hanging out with me today. We'll do some more tomorrow. See ya.