Chances are if you’ve followed web dev news over the past few years, you know about React, and about React Hooks. But, if you haven’t written with either before, it can be a little intimidating to get started on that learning curve!
In this talk, Cassidy will be demystifying and explaining React, how it works, and how to use some important hooks to get a state-driven application up and running from scratch.
PUBLICATION PERMISSIONS: Original video was published with the Creative Commons Attribution license (reuse allowed). Link: https://www.youtube.com/watch?v=xpOnNqg7EPs
My name's Cassidy. I if you ever want to look up my newsletter, I have a tech newsletter that I share every week at Casady Dacko and then newsletter. And then I've also got a few other goodies on there. And I work in Delphi. And Delphi is a place where you can post websites and do a lot of cool stuff and make sure your build process is a lot easier for building cool websites. But we're not here to talk about me or nullify today. We're here to talk about react. So this is going to be kind of an introduction where if you've used Riak before, this first part might seem a little bit slow. But I think it's important to kind of get the same vocabulary going for everybody just initially, and then we can get into what react looks aren't everything. So whether you're a beginner or you've done it for a while, it's good to think of react like this, react itself is a blueprint and then react. Dom uses that blueprint to build user interfaces and so react. Dom is the target platform. It's targeting the document object model in the browser. And similarly, if I had to react native and then I'd change this to react native and set up some other things, I would still be using react but react native would be using that bloop bloop blueprint that reactor's made to make user interfaces for for mobile. So that's the difference between the two, if you're ever confused about that. So if I want to make a react element and then render it to the DOM, so that way I can show it on the side over here, what I'll do is I'll do const react element is equal to, I don't know, a div low and then I can do a const look const dom element and then in here I'm just going to get an element from this page. And so in my HTML right now I have a divide route. Also, if you need me to zoom in on any fonts, let me know. I tried to do my best with my monitor here, but just let me deal with this divide root here. I'll do document and get element by idea and then root, not root, root. And so we've got a reactive element, we've got a DOM element and now we want to put them together. And so we put them together with react to Dom. And so we'll do react dom render. And that's going to put the react element and the DOM element together so far. To refresh the page we've got. Hello, I'm zooming in on the wrong thing. Hello. And so we've got we've got something on the page and that's, that's how we react works. You take anything that you put in this react element into that DOM element and it's lives inside of a div and that's, that's how we react runs. And what's really cool about that is because it just lives inside of a single div, you can kind of make really large applications just in one small HTML thing and now React has been around for a while. So this doesn't seem particularly novel, but I've been doing Web dev for a long time and when this first existed, it was mind blowing because it meant that you could put all of these giant applications into a single div. If you wanted to slowly convert from backbone to react, you could kind of have react to live in different parts of your background components until you could convert everything to it. So I just think that this is a cool thing that your hello world with React is just these three lines of code. I think that's great. But that being said, there's HTML in here. Oh no, we're kind of used to it now in the Web development world, especially with Mujib's and a bunch of other frameworks out there and and libraries that let you do this. But what this is, this is just X and it's not just putting HTML in in your JavaScript as much as it seems like it's actually it's. JavaScript that transpires to its HTML syntax, that transpires to regular JavaScript, so what it's actually doing under the hood, I'm actually going to comment this out and I'm going to make a different react element, const react element. And what I'm going to do is I'm going to say react, create element and it's going to be a div tag. It's not going to have any attributes or anything. So I'll put no and then I'm going to write Hillo like that and now it's printing out this exact same thing. And let me scoop my window a little wider. Outline lengthier. So as you can see, it's I mean, yes, it's different because I didn't capitalize it or anything, but this. This line right here, this react to create element is the exact same thing as doing this div hello on the inside. And so that's this is what's happening under the hood that Jesus is converting to this react that create element. And because it's JavaScript, you can get as abstract as you want. We have this Haluk thing here. But what I could do is I could put this in a variable and do like let text equals hello and then take this out and put text here and then it'll render the exact same thing. I could turn this into something really funky where I make it and immediately invoked function where inside of here we return text. Text when we return, hello, and then it'll do the exact same thing, but then I could do text plus and then a bunch of exclamation points like this, it'll add the exclamation points there and it can get really abstract and you can actually add as many children as you want here. Hi there. Let's just say as an example and it just upends it. And so because this is how I react to create element works, these are just different children inside of react. I create element. And so this is a text. No, this is a text node. This also means I could also do react to create element inside of here and then proceed to make giant react applications, all just using this kind of syntax that is totally allowed. But that gets pretty gross where instead of doing all of this giant react, I create element thing that that repeats over and over again. You can just do something nice and simple like what we had before with this react element with the div. Hello. And then instead of typing that hello there, we can take in the text variable like that. And so whenever you want to have a return to JavaScript and whatever expressions you want, you put it inside these curly ratios right here. I hope everyone's following again. Let me know if you're not and say so in the chat. But this is this is how react works at a very, very basic level. That being said, we want to start getting into Hooke's and we want to start making something that's a little bit more interesting. So I want to go through one more vocabulary thing before we actually move into making these hooks. So we have this div here and it's just an element that we've put inside of here. And we could even do something like we put a div inside of here and put that react element inside of the div that is totally allowed. And now it's saying the text reerect element. I've got to do the Brace's like I mentioned before. But what if we want to make a reusable component right now. Again, this is react to create element. It's not creating a components, it's just creating an element. This is just the return value of that react to create element. If we want to turn this into a component instead of an element, a reusable component, it's done. This is how you do it. You just make it into a function. So instead of doing the return value of reactive element, you do a function that returns it. And so I could, for example, turn this into a button and then I'll turn this into a button here or not a button there, a lowercase button button and then a button. And then I will instead of having this expression here, I'll do button like this. Now it's a button, and not only that, because it's a reasonable component, now, I can have as many buttons as I want. Look at that, they're all saying hello and there are buttons that can do things and there's a lot of stuff that you can do with this now that you have an actual button made. And so let's just say you don't want to always have it say hello. You want it to say other things. I could have text equals something and I'll say hello in there. That doesn't change anything here. We need to take in the variable inside of this function. And so I'm going to have the variable text right there. And now our other several buttons don't have text passed in. This one is no longer in use since I'm just going to print it out. But now we can add a bunch of different text and so we can make something that seems a little bit more real by doing add and then subtract, for example. And I'll take out these buttons. There's so many buttons on the screen. So now we've got add and subtract. We've got buttons that don't do things, but they could. And so now we've got something that it's starting to get a little bit more real when you pass variables into a component. This is called props. They're their properties of a component. It's kind of like saying attributes. If you wanted to say, for example, if you had an HTML attribute of class or ID or something, it's just like that. But in fact, we call them props and they don't have to be just straight values. You don't have to do and you don't have to distract. You don't have to just do a number. You can have a function. Pastan, too. And so, for example, if I wanted to have unclick, I could have a function. Pastan where unclick. I want it to console that log. Something I'll do, cancel that log. We added oray that was not creative but it's ok. It's late afternoon so if I have this on click here I can click this button and nothing will happen because I didn't actually use this prop. So I'm going to put on click inside of here and then I'm going to do button on click and then I'm going to do one click. It should decrease my line length, I don't know how to do that quickly, I'm going to change that in settings really quick because we're about to have some very long lines. So sorry that added to the line length. Please be in there. I'm like, yes, OK, I'm going to do 50. And that should that should be better. Or not, whatever, that's fine, I'll just do you know what I'll do, I'll do this for sure. Also, I'm sorry if you hear very loud noises outside my window, it just started raining really hard. And I live in Seattle, so I guess that's to be expected. OK, but anyway, we have this button, it's unclick and text. And so with this on Click right here. Now, when I click this button, it says we added right in there. Look at that. It's so cute. It doesn't actually do anything except log stuff, but it's cool and you don't have to name it just on click. You could do just like, I don't know, fish. And then I could call that fish. And then in the unclick in here, it'll be named fish, and that will totally be allowed and it'll work. And when I click on this, it'll still print that we added because we're still applying the click to the button itself, but we're passing it in from the parent. Now, this might seem like a very, very simple option. C changes it changes the wrapping. I'll do that. No, that does not. It gives me one of those. I'm just going to not do that. But anyways. Or Option Z. Well, that doesn't do it. OK, that's fine, thank you for trying in the chat. So anyway, we have these events that are happening and they seem like very basic ones. But let's just say we had some component, like some very important form like this and we had an on success in here. And there's some function that that is called in there. That means when this on success is called, someone filled out some very important form registration, something else, what have you. They hit the submit button. It sent the form was processed. You got a successful response back. And now this unsuccess function gets to be called. That's that's a very big deal. And that's really a big part of the heart and soul of being able to pass things via props and compose these components that really can do a lot of cool stuff with that. And so, anyway, that is props now. We don't have something that is very real right now, but this is where I'm going to start getting into react hooks. Now, if you've used react before last year, then you probably have done a lot of class based components where instead of having a component that looks like this, you might have had like class button extends reactant component, and then you have a constructor and all kinds of lifecycle methods in there. That still is fine. But I'm here to tell you. Stop. Stop because these those kinds of Class-Based components, yes, they work, but there's a lot of things that are happening as reactors being developed that just won't be supporting class based components anymore. There's the only case for using class based components now is error boundaries, but that is something that is going to be fixed soon. I actually have talked with the reactor project team about this and it's going to be just in functional components. So you're only going to be using function components from now on. That is my pitch. Let's actually use some hooks, though, now so that I can show you the power of these hooks. Class based components have the attribute about state rights. How does Hooke's replace that? Good question. Let's do that right now. So I'm going to import you state all hooks are JavaScript, just like J.S. X's, JavaScript, all of these hooks or JavaScript. I actually think a more fun name for hooks would be like uses because they all just start with the word use. But whatever. Anyway, let's just say that we have, um, I hate to do something so boring, but let's just say we have a counter component, we have function counter and in this counter component we're going to have some buttons. And so I'm going to return a counter, I'm going to do a div in here and I'm going to have another button and then another button like that. So that'll work. Um. Button and then button. I'm going to do that and I actually have some words to say, but I'll just get this part done first. OK, so if that's the case, I'm going to take out these and I'm just going to put a counter in here like that. So we have a counter. These buttons don't have any text in them. What I'm going to do, instead of adding the text as a as this sort of this sort of prop, but I'm going to do is I'm going to add the text in here and I'll say add and then I'll say subtract. So so far, nothing has changed. But that's because I have to actually use them. When you pass things in like this as children of the component, that's actually a special prop called Children. And so if I were to do children like that. Then fish is not defined. That's OK, I'll do fish is going to be something and I'll pass them in like this fish fish is officially going to be our unclick. Get it officially. Aha. OK, anyway, so we're going to be passing this in. Must be a sign, an expression. I know. Let's just, I'm just going to do an empty function right in here so it stops yelling at me. And you can see that I am a flawless coder. OK, cool, nice. All right, we're back, that pun was not planned. This is just my life. OK, so we have add and subtract. They don't do anything, but now they're taking in children so we can put whatever we want in there. So technically, I could do a button inside of a button button ception like that. And now look at that. There's a button inside of the big button. You should not do that, but you can. And that's what JavaScript is all about. OK, so let's just say that we want to use this you state hook. We want to make this a state driven component. What we can do is we can create a state variable. And so normally, let's just say we have like let's count equals zero and we want to display the current count. And so I'm going to have a div. And the also current count is this variable count. When I do that, nothing will happen. And also, even if I did do like some function, add, let's just say I'll do a concert, add is a function that will increase the count and I'll do like count plus one or count plus plus whatever. That's all well and good. But because this isn't a state variable, it's not going to do anything. It doesn't actually tell react. Hey, you need to re render the component because the state has changed. So to convert this into a state variable. What I'll do is I'll do you state right here and then I'll turn this into a tuple. If you've done some computer science, that's a word you might not have heard in a while. And we have count and said count and so. With you state the parameter passed and here is the initial state of that variable count is the state variable and then set count is the thing that changes that state variable. And so with this add function, let's just say also I didn't actually put it in here, but pretend I did. And you were totally sold by my sales pitch there about why that was wrong. I'll make a subtract function and don't let me subtract. OK, so if we want to actually make this real, what we can do is I can do set count of count plus one inside of here. I'll do set count of count minus one like this. And now when I click these buttons. Oh my gosh. Would you look at that. It's beautiful, it's a counter, it works, and so it's setting the count and then it's increasing it and decreasing it. And what if more than one function could manipulate count? Where would that be, or is that not really allowed? Oh, that's totally allowed. And I will talk about that. That's a a list to get in there. But, yes, that's that's totally allowed to have multiple things manipulate count. So we have the we have these buttons working now. It's manipulating the count variable. And it's really cool because in react, which my whole thing is giant. Now what's cool about it is how specific it is, where as I'm increasing and decreasing, it doesn't render the entire page. It doesn't do a repaint of the whole damn. If you'll notice, Google does this little shiny purple thing right there. It's just changing the thing that changes in the dumb. And that's what's really exciting. This little tiny text note is the only thing that's changing. And so as a result, when you have something that's causing really large pieces of state to change, let's just say it's not just a single variable. But let's just say you want to determine if someone has logged in and you want to like certain things to re render because someone has logged in so they should see their profile. It won't render the entire page. It'll just render the parts of the page that matters. And that's really good for performance. And that there's so many implications with this. This is this is what's really cool. Now, one thing I want to point out with state, the state and props, I think, are the really core aspects of react to understand, to to get going. You can build a lot of applications with just these. That being said, with Class-Based convert components versus functional components, state is treated differently. And I kind of want to implement it. But I'll do this. I'll do this if we have time, because that's something that we could get very deep into and we don't want to get deep into that. But with function components, what happens is let's just say like I am react, I'm going to say I am react in a comment here I am reacting now. If I were react what I do when I create some kind of some kind of thing. And you're asking about is this Operation Async like set state? Let me explain because. Not really. So if I am react, what happens when I'm initialized or whatever, there's some kind of dumb table and the dumb table is is a thing where the components will live. And then whenever I create an element I can do like let element equal button, let's just say I'm going to create a button and it's going to have a state of whatever. Or I guess the counter would be a better example since we're doing counter. But anyway, we have our initial state is zero and then what happens is react will commit that to the dump. So commit that element to the dump. This isn't real. React, stop pretending it is as code helping me out so it commits the element to that dumb table. Now, when it commits that element to the damn table, then it says old element is now equal to element. And now whenever whenever a counter changes, whenever the state changes, it does a diff where it says now element is equal to counter again. But the state is now equal to one, let's just say, and it does a diff between element and old element. A little bit like that, and then it only commits that defeat to the dam, these functions are not real, but this is how it works. So when it commits only that defeat to the dam, it doesn't commit the entire counter thing. It only commits the change that happens. This is very similar to get dif, for example, whenever you run get if you know how it has like the plus and minus showing the exact line that changes, it doesn't commit the entire file to to the current change that you're making. It only commits the changes that happens and that keeps it very efficient. And that's exactly what's happening here. And so with functional components, what happens is it just recalls the counter function. And so it'll do counter and then counter and then counter every single time you state the state changes called it just it just changes the state that way. When we had class based components, when you had the class counter extends the reactor component and everything. Your state values that object of the counter was something that persisted over time, so whenever you did set state and then stop that, whenever you did set state and then whatever object that you wanted to pass in to change the state, it was changing the state on a specific object. So it was an async thing where if you tried to use state immediately after, you had to do it inside the callback function, but was functional components because it's a complete re render of the component. That's not how it works, because when set count is called, it renders the entire component to the page. So it's not the kind of thing where I would do a set count and then call some function in here to happen right when the state changes. You don't need to do that anymore. You can just call that function in your component because the state is already different when this component is run. And I hope that makes sense. Let me know if it doesn't. But it does it let's see. It renders the entire functional component every time it's called. Yes, it renders it. But again, the only changes that are made to the Domme are the variables that have changed. But yes, it recalls the entire function again. OK. People say, gotcha, I love it. Great, thank you so much, because that helps me if I need to re-explain things, I am going to comment this out, but if you have questions on it, let me know. So anyway, this is state this is this is generally how it works. You can change state on all sorts of things. Typically what I do is just primitives in here like string's or int's or something or booleans. You can do an object where if I if I were to have like phishers cake and then and have a bunch of different values in here and then counter is whatever. Yes, you can do that. But because when it does this right here, when it when it does this diff between the element, the old element of the new element, it does a triple equals diff, which reactant, JavaScript, JavaScript is fun. So this is true, but this is false. And I'm not sure if you know why. But in case in case you don't know this, this is just comparing objects or whatever. But this tripple equals is saying this object and this brand new object are completely different objects in space. They're not comparing the values of the object. They're comparing the whole things. And so that means you could get unnecessary re renders if you have an object inside of you state if you want to have a giant state, objects like that, instead of having just another state variable like error set error like this, the state is false like that. You can have as many of these as you want. But if you don't like that, I recommend using reducers, which I don't know if we'll get time to talk about reducers, but I've given talks on reducers before. And if you look up Kassidy Williams reducers on YouTube, you will find it is the hook system, the different stuff still using the Riak storm system? Yes, it is. We're still rendering this counter with react dumb right down here. So that's that's how that works. Go for reducers in a nutshell. I'll try to I'll try to squeeze that in. We'll see. So anyway, that's that's how these work. Now, I want to talk about some other hooks now. One hook that I think is particularly cool is the use of fact hook. And this one, I'm going to do a bit of reworking. So right now we have just like this counter right here, which is cool. We like it. You could even change it. So that way, like instead of buttons, you have an input element that changes the state and that's totally allowed. But I was thinking we should try to call an API together and I found the POC API, the Pokémon API, and it seems pretty fun. And so I figured let's let's call it that being said, we have this we have this counter here. I like it, but I'm going to make a new component just kind of on top of it. I'm going to call it Pokémon and I'll put a function all the way at the top here and we'll just make a new Pokémon function, function Pokémon. And then I'm going to return a div that says Hello, Pokemon like that. And now we've got Hello Pokemon on top of our counter here. So first we want to we want to make a Pokemon. We wanted to render some kind of Pokemon name. So I'm going to make a new state variable and I'm going to say Pokemon and then set Pokemon and I'll do you state. I'll do know if I could do Pikachu first, just to keep it simple, and then what we'll do is we'll do peek chip on a Pikachu Pokémon in here. So now it's saying hello, Pikachu. That's pretty fun. Cute, right? Is there a reason to use function instead of CONSED? No, it's purely because my brain works and fun ways. But yes, a functional component can be an arrow function. I could do const Pokémon does equal to this whole thing that's totally allowed. I just didn't feel like it. But yes, you can do that. It's purely personal preference. Yeah, oh, I'm glad that's helpful. Yeah, so it's just a different way of writing functions. So what I want to do is I want to not just say hello Pokémon, but I want to get a user input to to be able to tell me which Pokemon I'm saying hello to. So I'm going to scoot this down. And instead of doing just this Hello, Pokemon, I'm going to add an input element and I'll do an input on change inside of here. And then I'm going to capture the event. And then in here I'm going to do an event and then set Pokémon to event target value for you. And then let's see how to make sure I didn't close this. That's why it's freaking out on me. OK, we have this on change, and then I want to have that value to be an input value. Um. I'll just say Pokémon to start and then, oh, and typing goes text. Text, we don't want any tests here. OK, cool, so it says, hello, Pikachu, if I say hello. Ditto. Look at that as I type the changes, that's so fun. OK, but we want we want to get real data, not just not just whenever we type here of someone to be do Jigglypuff yet Jigglypuff, that's a thing. But what I want to do is I want to not just get whatever is in this input. I want to take what's in the input and call an API, the pokey API. And then based on that, I want to be able to get the values from that pocky API. Let's see, someone is asking by using the hook, does that affect the functionality. Nope. I used can't but you can totally use let you can't create constructor functions with the arrow functions. I guess you don't need to. Instead of doing its constructor function you could just type whatever you want here if you just, you just don't need a constructor function. If you want to do certain things in your constructor, let me know there are some consequences for this. Yes. But also because these are functions and not objects anymore. The this stop props doesn't exist anymore. It's just props and whatever you pass into props, I hope that answers that clarification for you. OK, so anyway, we call said Pokémon and it changes the Pokemon state variable. And that is what's saying that we should add an exclamation point because we like this. So we want to populate this with real data. Now, really quick, because there's some questions about Class-Based and functional and stuff. Remember that react is declarative and not imperative. And so if you were to do something like this, like what we just did with query, for example, that would be a more imperative style of programing. And so this is particularly evident if you have a different example. So let's just say in this office right here where I am, I have to heater's I have the wall thermostat back there. I'm a very cold person, not personality wise. I mean, like temperature. Gosh darn it. Anyway, OK, I have the temperature. The thing on the wall right there, if you can see, I can't move my hand right that where I can put in an exact number of what I want so I can say I want this to be seventy two degrees or whatever. And then I also have a portable heater down here with a knob that just increases and decreases the heat depending on what I want. Now react is more like the wall thermometer with the numbers where I say I want it to be seventy two degrees and the heater adjusts accordingly. It'll be just like, OK, well the room is too cold. I'm going to heat up. If the room is too hot, I'm going to let it be cool down. Meanwhile, Jake Creary and many other libraries and stuff are imperative and are like the portable heater with the knob. This example is to say, when you do something with Jaquie, you need to get the element that you want, pass the pass the element and the value that you get, then increase that value by a certain amount and then say, OK, now document that, get on the text or whatever is equal to this. You have to do all of that manual changing to the dom yourself, but with react because it's declarative. You just say, I want the count to be this. I want Pikachu to be what's on the screen and it manipulates the DOM for you. You work with the variables that you want and you say, I don't care how you manipulate the dom, I just want this to be there. And it's done. It's kind of like how if you've worked with designers and they put all the different screens on like a corkboard that they've printed out and they say, OK, this is the Arab state, this is what this is, this is what this is, that's kind of like what reactors you say what you want the UI to look like given these states and you let it do the rest with the DOM and it takes away a lot of the work that you would normally have to do to manipulate everything. I hope that explains some of the questions a little bit more and was functional versus class. Again, it's instead of having objects that are all over the screen, it's functions that are called to the screen and put DOM elements on the page and that ends up being even more declarative and that ends up making it future save for concurrent mode and suspense and a bunch of other stuff that's coming to react. Do we need to do a controlled input for the on change? If not, why? That is a good question. And you know what I'll explained. Controlled and uncontrolled components. So controlled components and uncontrolled components are a concept that has existed since the web has began, since the Web has existed. But we didn't actually give it a name until reactant was a thing. So if you think about just the Web in general, how can a user manipulate the DOM without any JavaScript whatsoever? Nothing, just just no, no JavaScript, the user is just doing something good, that is with input elements. I'm typing stuff in here and ignore the changes that are on the side here. But this actual input box, this is me interacting with the browser, whether you like it or not, that's changing something in the DOM now because the user has control of that. That's called an uncontrolled component. React doesn't control it. The user does. But when I do value right here, value turns it into a controlled component, meaning react is going to capture that value and control what the user types in. And I have an example that will take too long and I want to get to calling an API, but I'll write a blog post on this or something to explain a little bit deeper. That being said, I also recommend doing controlled components with this value equals instead of default value equals because that makes it so you have control over what the user is typing and you can set restrictions and stuff. So anyway, that's that is that is a very, very brief overview of controls. But when you do value equals it's controlled. When you have default, it's uncontrolled. There are pros and cons, but you should always do controlled just as a general rule of thumb. OK. That being said, we want to call an API. So because we want to call an API, we're going to pull in the book use effect, the U.S. use effect. So with use effect, it is named this because it is for side effects now with functional components as functional components and with functional programing in general, there are these things called side effects. And if you don't know what that is, let me do a quick example. Let's just say we have let the equals ten and then I'll do let add is equal to a function in here that returns to numbers that are being added. So I'll do X and then Y and then X plus Y. This is just a plain function, it will always return the same thing, but given certain inputs, if you want to add a side effect to this function, what I could do is I could do Z equals X plus 10. For example, this line right here is a side effect. It doesn't change the output of the function at all. It's just something that happens in in this component of whenever or in this function, whenever you use this add function. And so with react, there are side effects and that's what you use effects for. And so as a quick example of a side effect, let's just say I have a use effect in here and I'm going to put in a function as the first parameter and then the second parameter is an array. And I'll do inside if you I'll do document title is equal to say hi to and then the Pokémon. Like that, and then I want to listen to that right there, so now it says, say hi to Pikachu, you wanted to say go Pokemon. Sure, do it for the people. OK, I should have used a template strength for this anyway. So now it says go Pikachu right in there. Now, this is a side effect that changes every single time I change the value in this dependancy array. So this this second parameter right here, this array, whenever something in this array changes, it will recall the function in the first parameter. So because this changes that I could do. Dedeaux And now it says Go Dedeaux in my little tab up here. And this variable, it can be a state variable, but it can be it can be something else. This is going to be covered later. But when is when is use a factor? Good question. Use effect is run on the initial render, so kind of like component will mount. And then it's also run similarly on every single state change. And so it's not so much replacing like component will mount and something else or component did mount. It's replacing a lot of the lifecycle methods that are that are in there. It's this is like angular watch kind of. So what this does is it tells this function to stay in sync with this variable in here. And it doesn't have to be a state variable. Let's just say I had left a message equal this go Pokémon thing right here, and then I could put a message inside of here and then I'll do a message like this. Now it does the exact same thing. If I do that, it'll it'll change it. But it's staying in sync with this. And then let's just say I wanted to I don't know if a Pokemon's name is too long, it's going to get cut off. And so message equals Biscoe, Pokémon, dot substring. And then I'm just going to say zero to. Five or something like that, so now it's just saying go pie. And so now the effect actually isn't being called because message isn't changing. Message is only changing if those first five characters are changed. And so when I finally do this now, it's actually it's actually calling the scenes effect. And so, again, the effect it is called on the initial render and whenever something in this value is changed. That being said, you can also make this empty. And as a result of that, let me take up the substring. As a result of that, this is only an initial render and then I can take this out completely and then it just runs on every single state change. So I'm going to actually write that down to make it easy. When you have some variable in here, that means that the effect is run on initial render and when var changes, that's going to put in there. And then when it's an empty array and effect is run on initial render only, and then when you have nothing in there, then it's run on initial render and every state change. So you can kind of think of it as like component will receive props and on component did mount and a bunch of other things. So you can actually control when use effect is being called because of this dependency array. Yes. And so these are the things that change it. And let's just say you only want it to be called when certain things happen. You can just add if statements inside of here to make certain things happen. So I'm going to turn this back into a message right here so it happens whenever that message changes. How do you handle a nested properties of a state? Variable change changes like an array of prop changes, for example. Oh, so you want it to change whenever like let's just say you have something in there. You can you can manipulate it however you want. If I let's just say that message was an array, I can do message. Sub-Zero and I only want to listen to the first value of the array or if it was an object, I could do message dot value or whatever the object was. You can you can listen to very specific things. It doesn't have to be just one straight variable. Let's see if you call an arrow function inside of the use effect, should I call that? Yes, so that is that is a good question. So if you have a value inside of here, that is a function you call that. And so let's just say and what I don't know, cake equals a thing. I don't know. Let's let's just say it's something that does something. I'm just going to the council that log Pokémon and you want to call it inside of. They're going to put cake like this. Yes. You can do message and cake like that. And it will you can have as many things as you want inside of this dependancy array. There are some people who say that you should only have one in there. That's kind of up to you and what you're doing. But, yes, you can put you can put functions in there as well. OK, let's call an API. I've been doing lots of talking. OK, so now that now that we want to call this API, what we can do inside of this use effect vectors is we can just call a fetch function. And again, because it's like component mount and all sorts of things, it's something that can happen outside of rendering and it's something that won't stop your component from rendering anything. And so what I'm going to do is I'm actually going to have this Pokémon here. I want to also render an image. And so I'm going to do image and then set image and then I'll do a used state of I'll just have it be no and then const and then I'll have an error too, just in case the API returns an error, then I'll do you state and then I'll also set that to know in case something happens. OK, cool. So we have our input, we have our Hello Pikachu. I'm going to put a line break here and then I also want to put another line break and then add an image and I'll do a conditional down here where I'll check if the image exists, then I want to render an image. So this is a kind of a shorthand way of doing it. Image and and image as our C equals an image. And then we'll do an alternate Pokémon. We're going to be so accessible. OK, cool. So now nothing has changed, but we are set up to actually call an API. Oh, then we just got a bunch of questions. Let's see, uh, there's a custom hook that handles objects. Diffs. Yes. Thank you for that. But if we want to do an async call and the effect and then update the state as a result of the async call, you can do that. And that's kind of what we're doing with this API call that we're about to do. So I'm going to throw in another use effect. Then inside of this use effect, we're going to start calling some APIs, so I'm going to fetch the Pokémon API and I actually saved a little variable there. So that way I don't have to type all of this up myself. They're cool. OK, so we have this in there. I don't have the accent on the E, I said that's fine. OK, so we're fetching or fetching the API. Then we're going to do this is just JavaScript. This isn't even react stuff. We're going to do read and then raised Jason. And there then we want to actually do stuff with it. And I'm going to do we're going to take that response and then we're going to manipulate some state. So I'm going to do the set Pokémon is Rezo name like that, and then I'm going to do set image image and then inside this pokey API, there's a thing to actually get the image somewhere in there. Spritzes. From default. OK, so it's going to be residents sprites that front default. Like that, and then we also want to have a catch and inside of that catch, we're going to have an error and that's when we'll set error to error like that. And I'll put error in here. OK, that should theoretically work. We'll find out. Oh, my gosh. Look at that. It did. I love life refreshers. Woo hoo! OK, now we had Jigglypuff before Jigglypuff. Yeah, look at that left and right now, it's happening on every state change, let's make sure that it doesn't do it and we click a button or something. I put Pokémon and I'll put an image and I'll put error. So whenever these things change, it's going to recall certain things. Look at that. We just call an API. You just do it and use effect. It's beautiful. We're set in state in there. It's cute. I'm happy. That's great. Oh, wait, that's a great thing. I'm going to say them all because now we're going to catch them all. Yes, actually small. All is better. There we go. Now we're going to catch them all. Ha ha. Humor. OK, so this is this is how you call an API. Now, there are certain guardrails that I would like to set up. Now, let's just say I typed Pikachu and the request was going super, super slowly. And then because I was getting frustrated, I then typed ditto super fast and that request went fast and we see it on the screen. But then when the request succeeds for Pikachu, now it's going to show Pikachu, even though I typed ditto, it's out of date. This is this is something that can happen a lot. And especially if you think of someone logging in and then someone else re logging in and stuff, you want to be able to make sure your affect is always up to date. There's some good guardrails for doing that. And the simplest one is just having a variable is just say let is current equal. True. And my sister's comment had a webinar. OK, so it will say let is current equals true. And then inside of here I'll do it if it is current and then inside of here I'm going to do this. So if everything is current then great, we're going to set it. But we need to make sure that is current can be set to false, otherwise it will always be true whenever a component dismounts or whenever any of the values inside of this dependency array changes. The return value of this use affect function is called so the function here is called a cleanup function. And in this cleanup function, this is where let's just say you have certain things set and you want to, for example, turn off an event listener that you have. This is where you would do it. So this is kind of a component will unmount and react Class-Based component words. And so inside of here, what I can do is, is current is now false. And so whenever Pokémon whenever this Pokémon function is unmounted, let's just say we navigate to a different page or something, or whenever the state changes Pokémon image or error, it will call this function right here. This this arrow function is current, is false and stuff. And so as a result, the fetch that you made in that first call of use effect will then be canceled. Or rather, the fetch can't be canceled, sadly, because. JavaScript is broken, but the state changes won't actually happen, and so it'll check is this a current iteration of this of this component, then? Great, we we can set this. Otherwise this is bad. Yes, the state changes every time we press a letter. I'm not going to worry about bouncing right now and being just like, ah, make sure that you have typed a full Pokemon name and validate it. But yes, you could also put guardrails, like if the event targeted value is greater than a certain length, then actually called the state change and do stuff. I'm not going to do that now, but you can. And that is allowed. And yeah, you don't need axios or anything. You can just you can just do this variable and what you can do is you can actually make custom hooks out of this as well. And so a custom hook, if you ever hear that as a buzzword, all it is, is a function that wraps a hook. And so, for example, right now we have this use effect right here with the document titled If I Did a function function use document. Title like this, I can just plop this whole thing in there, I'm taking it out, putting it right in there, and then I'll pass in message and now I can do use document title with message Pastan voila. It works the exact same way, but now you can make a whole separate files that have your own custom hooks outside of your components and so your functional components can stay really clean because your hooks can live elsewhere. I can even put these state variables. I can put this in a separate hook and we just like use Pokémon state. And then when I do use Pokémon State, it has all of these values that are passed in. So your actual components itself that render all of these divs and actual H2 and everything, they can get really, really clean really, really fast when you do this. And I can do the same thing with this, I could turn this into use Pokémon and just make sure that it returns the right values that that need to be passed in here. And so it it's pretty powerful that way. Let's see. So use effect as some kind of components component will amount and class components. Yeah, it can. It can do pretty much everything except for error boundaries, which again that is going to be in react soon. Tim, can you use async wait instead of promises. Yes. I just this is easier to write but yes you can, you can't do it out here. Like I can't do a sink right here or whatever. You would have to do it in a function and then do like async function, whatever or whatever and then do it inside of there. The the function that is passed in to this use effect right here, it has to be immediately invaluable. If you put async Kuwait in front of it, that turns it into a promise type and not a function and react will yell at you, but you can not have as many use effects calls as you want in a component. You can have as many states as you want and a component you can have as many hooks as you want inside a single component. Let's see, we end at five thirty, so we still have some time. But if we talk about reducers, SHULIE producers are really fun and some people might be just like, wow, her version of fun sucks, but trust me, reducers are very cool and I'm going to explain why. So, again, we have all of these beautiful pieces of state. And instead of having these separate pieces of state, let's just say that we want to have a producer for it. We can we are allowed. It's great. So in order in order to do that, let's see, can we use and is current on if statement outside of. Yeah. I mean the the scope of use current is inside of here, but you can put it somewhere and do something. Yeah. It's just JavaScript. Is there a way that we can determine which prob updated using this effect. Yes. And it's escaping me now but honestly just do if statements and that that is the thing. I know some people have made custom hooks for that specific case, but off the top of my head, I can't think of how to implement it because my brain is tired and because I'm thinking about reducers now. Can I access the dedeaux in the first slow request? Oh, and that in that mistake thing that I talked about, yeah. You can capture it and then start in Şeref or something and. I don't want to jump around too much, so I'm going to talk about reducers, but know that a ref is a variable, that you can it doesn't it doesn't trigger a state change when it changes. And so you could do like bullet proof equals use ref and then set values inside of poop. Should not use that as a variable name. I'm a professional, but when you do that, it can be something that persists across time and space and you can have refs that are specific to old API calls or something like that, or you could log it. There's a lot of options there and you can do stuff outside of this is current and just do things and log that sort of thing. OK, so again, producers, producers are cool if you have not. Let's see, is it all right to ask a rather off off topic question or are we only allowed to ask react questions in here? I mean, I don't know if you want to ask, but you can go for it. And I can I can try, but I'm going to be sticking to a generally reducer and react questions now. But I mean, it might be useful to answer the questions. Could we be brief, but use callback and use memo? Sure. I'll do that at the end. I'm not going to be talking about mechanical keyboards because you'll never hear about react again. OK, so anyway, I'm going to talk about reducers now. What are reducers, reducers or something that actually exists in math and stuff? And it's not necessarily it's not necessarily a react concept, but it was made particularly popular in react because of redux. And if you don't know, redux, fun fact, you don't have to learn it anymore thanks to reducers. So there are there are some great hooks that I could talk about these for literally hours. I've taught to full day workshops on the stuff, but redox, you don't need to learn anymore because of the context API and the use reducer hook. I'm not going to get into context today. Long story short, lets you share state. That being said, let's talk about reducers. Let's just say I have an array and it's an array of numbers. I'm going to say one, two, three, four or five in there and I want to use my ADD function from before I'm going to take out the side effect. But I'm just going to scoot this down here, kill these off and take out this whole thing. So let's just say you have an array and you have add that returns X plus Y and then you have let some is equal to array to reduce and then add and then zero. Do you know what's going to happen? In case you don't, I'm going to do a console log of the Sulmona right in here. 15. Aha. It added everything together, but how I will show you what it does on the first iteration, it does zero plus one and so it takes this zero right here and then the one adds them together. Then on the next iteration, it does one plus two. It's not doing these one plus two, it's doing the some of the previous invocation and then adding it to two. And then on the next one you can guess it, it's three plus three. So it takes the sum of the previous invocation, then adds it to the next one, then the next one is going to be six plus four takes this three plus three. The sum of that then adds it to four. Then you guessed it, it does ten plus five and then it takes that previous value adds up to the last value of the array. Voila, you get 15. So this is how reducers work in general. Just in terms of math. What's cool about it though is if you think of this as some kind of state changing function and then this zero right here as the initial value of the initial state for your component. And so you could have some kind of reduce or function function reducer that takes in a state and an action. And then someone said, does the arrow function always need to return one value only? I mean, most functions return one thing, but you can you can put stuff in here. Council Doug High. There you go. Anyway, so anyway, we have reduced her stay in action, and it really does is it returns the state and then whatever action you applied to it. So let's let's do a more detailed example than this array thing. Let's just say you have CONSED initial state of count is zero. We're going to come back to our counter component and then I'll do cake is false because we don't have you know what, Kaka's true. I want cake and then I'll say we have a user is some empty object or something like that. The return should be primitive. I think that's a question. Oh yeah. I mean, you'll see it doesn't have to be primitive in things. You'll see. You'll see. Anyway, so we have count zero Kaka's true user is an object. We want to apply actions to to this initial state. And so I'm going to have an action array. And then in this action array, we're going to say, let's just say we have an action type is ad. And whenever we have the action type of ad, we want to increase it by two. And then and then we'll do the exact same thing, but we'll have minus and we'll say when we have an action of type minus, then it'll decrease it by four or something. And then we can have some other thing where we have like type and then eat cake and we don't have to do anything. Just if we eat cake then cake will be false. How about that? So we have these actions. We want to apply these actions. And so inside of our reducer function, we need to take those actions into account and return a new state. So what we can do is I can have an if statement here and if action dad type is equal to AD, then we want to return a new state inside of here and we want to make our new state equal. The existing state object, but with certain values changed. So do count is equal to the current state dot count and then plus that action by which is what we're getting from up here and I'll do the exact same thing. But with or else it's going to do else. If action type is equal to minus, I need to do more than just an equal. How about that. OK. Life is hard. OK, minus then return this whole thing. I'm going to copy it, but it's going to be minus action type II and then else I'll just, we'll say that these are the only actions that we have available right now. I'll say else we'll return the current state. But then cake is false. The cake is a lie. OK, cool. This is our reducer function now. So if we want to make it real, I'll just do a console log actions that reduce our reduce our function and then our initial state. So now look at that, we have counts negative two, so we made it from zero to positive two to minus four and then Kaka's false. So we have applied all of these state changes to it. Isn't that great? Oh, my gosh. How about that scrolling back? And it's mostly just cake is a lie joke. So that's perfect. That's all I need to hear. So this is this is how producers work. It's great. And this is this is how the user do sahuc works as well. This is this is how redux works under the hood. And the thing is, we won't always know what these actions are. These these actions are something where you don't always know that a user is going to get on my website. Then they will click this button, then they will open this, then they will do that. You don't know that. And so there's a function called a dispatch function that populates this actions array and then applies the state changes based on based on that. OK, so OK, I see so many people copying and pasting. You're welcome. And hope that's Ted. Ha ha ha. Thanks anyway. So now that we've done this, what I'm going to do is I'm going to convert these three states to use producer. And I think that'll make us get right on time for the end. And I can answer some last minute questions then. So if I want to convert all of these to use reducer, what I'll do is use reduce or returns a tuple, just like you state. But the values in there are the current state and dispatch. So const state and dispatch is equal to use reducer. Oh, and I also need to import it at the top use reducer like that. OK. So, uh, where did I go? Here we go, user reducer now. You can use user Doozer and you state all in the same component if you want to. That's totally loud fun fact. If you actually look at the code that implements you state your state is implemented with user Doozer. So they actually work together very, very well. Now with user Doozer, what it takes in instead of just one initial value, because this is a whole state and this is a whole dispatch thing that will change that whole state object. It takes in a reduced function and then it also takes in an initial state object. And so I'm going to make this initial state object to have Pokémon image and error in there, and so we have Pokémon of the initial value of that is Pikachu. And then we have sorry about the pop up. We have image, the initial value. There's no we have error and the initial value is null. And there you go. We have those values if we want to use them. This is where things are going to break initially. But I promise they'll come back and it'll work if we want to use them. We do let and then Pokémon image and then error equal state because we're getting this state value from use reducer. OK, so that's how we get that. But we're still calling this set Pokémon set image set error. We have all these functions that we're calling, but we're not actually using them, which is a problem. So what I'm going to do is I'm going to implement this reducer function, return this just into an error function here and now inside of this reducer function, what we get is a state and an action. And we want to dispatch actions to this state and action right here and we're going to return new states and stuff inside of there. So what I can do is I can say with this set Pokémon set image, I can actually group state changes together instead of doing two different dispatches right here. I can do dispatch and then I'll say type is load Pokémon, load Pokémon. And then when we do that, we'll pass in the response. And so I'll do a name is raise that name and then image is raised, image like that. And then, oh, I saved it, but it's yelling at me for calling these functions cool. We've done this resident named Resident Image thing and now we need to take care of this load Pokémon thing right in here. So let's see, uh, where's my function? There it is. So what I can do is I'll make a switch statement and set it instead of an if statement. We're going to switch on action DOCTYPE and then inside of action DOCTYPE, we're going to have a case for Load Pokémon, load Pokémon. And with these you can make enemies and put them in separate files and stuff. But this is just an example. So you get it. I'm going to return the current state, but certain things will be changed and it's going to be the action name and the action image. So. Pokémon is now equal to action and dot name and then let's see. Yeah, Pokémon is actually the name, and then images restored image, that image is action, image like that. I'm still getting arrows on the side, and that's because I still have to get rid of some of those. OK, so that's we've just replaced a couple of those in there and now we can do another one. We're going to catch them all. It's not going to be as clever sounding now. We're going to dispatch and then we're going to have a type of error. And then we have type error, we'll just pass in error right here and now up here, I'll do a case for error. Do kids error and then inside of their school return? Eight, and then there is action there like that, we should not have a default case and I'll just say default is I'll just return state so it doesn't actually do anything. OK, we still have a couple that I need to get rid of. Let's see. We're commenting this out. That one's gone now. We have to do it down here. We're just going to I'll just do a dispatch set, Pokémon type Pokémon name, I don't know. Uh, type. Cassidy, because I feel like it and then I'm going to do Pokémon is event target value and then whenever we have the type of Cassidy we're going to do is Pokemon. This is starting to get a little bit happy looking, isn't it? But that is OK. Do I need error am all. I probably do. Did I not pass it in? Oh, you're right. I'm all thank you for fixing that. That was right. OK, a case for Cassidy for her. Bail me out. OK, case for Cassidy in there. We're going to do return and then in their state and then what did I call it. Pokémon that good did. Yeah. We'll just do Pokémon is action Pokemon and Pokemon. OK, now I need to get rid of the set Pokémon in there and I think that's it please. Oh thank goodness. Yeah. OK, so now this is the initial state. What if I were to do Dedeaux. Does it do it. My my not getting my image. Something is up. Resident spritzes, not resident image, thank you very much. I needed to do this whole Red Front default. Good call. Thank you for letting me know. So I didn't think about it. There it is. All right. And now, if I were to do what's a more obscure one? I don't know. See that? Is that in there? Yeah, it is cool. So this is how you convert to reducers. This is kind of long and it can get very long. But again, because of custom hooks, you can make a whole like Pokémon reducer thing and put it elsewhere in your code. You can you can export things really nice and easily and make your state live elsewhere. But this is generally how you use reducers. And what's cool about it is you can not just do load Pokemon error and set certain Pokemon things and use it as a regular state thing. But you can create full on state machines and call functions inside of here. We're let's just say whenever I do load Pokemon, I also want to call some function inside of here. And so it doesn't just do a state change, but it might trigger a side effect that might do something else. Reducers are very powerful and you can really hack them to do a lot of really cool things. How much state would you have before you would reach for reducers? I personally try to use your state as much as I can, but once I get past like four or five U.S. states and a component, that's when that's when I switch to use reducers. This feels too ad hoc, how would how would it show up with the wildest export, the producer away? Yeah, I mean, this again is kind of a hacky one. There are a lot cleaner examples out there in the world. But this is you can export the producer away. Yeah, the effects clean up was it was supposed to avoid all the network calls, so it did. It's hard to explain, but basically it just didn't do the bouncing. It's still called the things. I just didn't type fast enough. It technically worked, but my Internet connection is fast. But yes, you're right, but my Internet is fast. If I were to, like, thwart it in some way and then and then do it, it would it would clean it up a little bit faster. But it just made the API calls because I didn't type fast enough. Again, this isn't a bouncing lecture, but it's a thing. But yeah, if I copied and pasted let's just say I well I don't know if I can even copy and paste that fast. I'm going to copy and paste. Ditto really fast and then undo. Can any other. Oh, wow, that was really fast. Look at that. That's amazing. The Internet is cool. But anyway, technically, that's that's what it should do more than a number of U.S. states. I reach for your producer when you have one action that starts changing multiple states. That's also true. Notice how we were able to group states together. Where was it? Right here where I did load Pokémon. It lets you kind of use more product focused language where instead of doing, oh, I'm setting the state of Pokemon, then I'm setting the state of image. We can know this group of states change state when I load Pokemon and this is only two. But imagine that you're setting state of like three or four different variables at once when an API call is set or something changes size or something like that. This allows you to know that it happens when Pokémon is loaded or when an error is called or when instead of Kassidy I did user input or something and change this to user input like that. And so, yeah, when you group state changes, that's really useful. Or you different different amounts of form data. There is a thing that is incredibly rare and the react team is pretty good at grouping it. But let's just say you still had these and then something happened in between these two state changes. That's called tearing. It typically doesn't happen again at they're very good at grouping state changes, but using reducers. Destroys that problem of tearing where something might happen in between these two state changes. Again, that's very rare and you don't really have to worry about it, but. And in this world, crazy things can happen. I'm currently working with model repos. What do you think about the integration between react and Angular? I personally haven't done that before, so I know it's possible, but I cannot speak to it. And good luck. Will I be posting the code? Sure. I can make a gist of it and I'll post on the chat before we end. One last thing someone asked about. Use Mammo and use callback. The main use effect is making a request to the API. Should we be taking care of that? I'm not sure what you mean by taking care of that, but yes, it is doing that. Yes, I can clean this up a lot, but I'm not going to right now anyway. Clean up functions. Hey, that's kind of a pun. Use my mom and call back those two those two hooks are ones that you will hear a lot, what they are are ways to optimize your performance. And so let's just say I have some function, more to do. Let. Some function, let's just say I have some function that does a very expensive calculation, like it does some calculation of things and it returns, I'm just going to return cake and then I really want cake. But anyway, let's just say you have some function that returns cake. And so every single time Pokemon is run and we call some function in return, like let's just say we call some function in here, whenever I click a button, I don't know, something like that or whatever the function renders. This, let's just say we have something expensive in here that takes a lot of code to compile, to build, to to run, like calculating a certain amount of dates and the differences between them, I don't know. This can slow down your code and it's usually our fault and not reacts fault because it's something that's slow. What you can do is find use Memmo, use Manlio. And we can we can make it so that let's just say it does kick us Pokémon just for this example, this doesn't make sense. But you'll see we have this expensive, expensive function. What I can do is I can do use memo around this function right here where the first parameter is the function and the second parameter is a dependency rating, just like use effect. What it will do then cannot access. OK? Don't yell at me. Oh, that's because I did it up here. I've got to do it down here. Because of where Pokémon was declared. OK. Don't yell at me. We're good. OK, so what this does is it will make this expensive calculation and then you can use some function. You can use the value inside of some functions, technically, some value, because this isn't returning a function. Anyway, we get this value, this expensive calculation react will save that value. It's memorized. Sounds like memorize but like a baby set it, it's memorized and then it won't recalculate and do this expensive calculation unless this value of Pokémon changes. And so this is a way to kind of reduce the number of things that happen in your code. Use callback is the exact same thing. Or let's just say if this actually does return a function and it does this or something, that's when this happens. It ends up honestly, it looks silly because this is kind of what ends up happening right here and it looks dumb. All use callback is is it. It wraps it wraps it. So that way you can only have one of those double arrow functions instead of two. That's that's it. So that's that's all use callback is. But that's that's what I use my Molineux callback is for. And so it's a way to reduce expensive calculations that you might have. That's kind of a fast explanation of it, but that's that's really all they are, and you'll you'll see it a lot for if you memorize some large value that you might pull from a use of fact and do that sort of thing. What's the difference between use Memmel and use effect with only one dependancy? Use Memmo, return something. Use effect does not. The only thing that you use affect returns is the clean up function. But use Memmo is something that returns a value that will be shared and saved. Are there any other questions before I start saving this and start wrapping up? This is a very large file. I'm going to just get it back. I'm going to save it and I'll put it in the chat so that you can access it. And I'll do a wise line webinar on hooks and put it in there. Let's see, I have a question about you, state, what is the difference between state count previous can the previous count plus one, they do basically work in the same way? You can totally do that one after that. OK, I'm copying and pasting and I'm calling this wise line Dargis, create a public trust and then I will share it. Cool, and then I am putting it in the chat and you can look at it and I'll update it if I have to type anything else, but are there any other questions? You all have been great at asking a bunch of things. Let's see. Could you again explain the difference between controlled and uncontrolled components? Long story short, controlled components are something that react controls the state of an uncontrolled components are things that react to does not control the state of. Its just a user typing things in. So you assigned both the change and the value on the element and uncontrolled as just the value on the element. Um, what about another Tookes, you can import whatever hooks you want, like, let's just say I made this export function use document title. I could have a whole file called hooks charges or a separate folder of all my different hooks like that. And then I could make my hooks live somewhere else and import them in. You're very welcome, everyone. All right, well, thank you so much for having me. This was great. If you want to contact me, I put my GitHub there because you got the gist. But feel free to tweet me Twitter dot com slash Kasser. Do I just put that in the chat? You can ask me questions any time, and I hope this was useful. One question. How do you eat cake if it's alive? I don't even know my favorites, which is silence. I was typing on this keyboard with some silence. This keyboard right next to me is also silence. Like those ones a bunch. Do I have some kind of course. And Utamaro plural site. I have a YouTube one, but it's using an old version of react. I'm working on a new one that will be on SCREAMO and I'll release that. That's about it. OK, I'll let the organizers take it away.