 My name's Cassidy. If you ever want to look up my newsletter, I have a tech newsletter that I share every week at cassidue.co and then slash newsletter, and then I've also got a few other goodies on there. And I work at Netlify. And Netlify is a place where you can host 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 Netlify today. We're here to talk about React. So this is going to be kind of an introduction where if you've used React 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 hooks are and 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 blueprint that React has made to make user interfaces 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. Hello. And then I can do 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 div ID root. 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 know. With this div ID root here, I'll do document.get element by ID and then root, not root, root. And so we've got a React element, we've got a DOM element, and now we want to put them together. And so we put them together with react DOM. And so we'll do react DOM.render. And that's going to put the React element and the DOM element together. And so if I were to refresh the page, hey, we've got hello. Oh, I'm zooming in on the wrong thing. Hello. And so we've got something on the page. And that's how React works. You take anything that you put in this React element into that DOM element and it lives inside of a div and that's how 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 live in different parts of your backbone 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 Vue.js and a bunch of other frameworks out there and libraries that let you do this. But what this is, this is JSX. And it's not just putting HTML in your JavaScript as much as it seems like it. It's actually, it's JavaScript that transpiles to, or it's HTML syntax that transpiles 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 null. And then I'm going to write hello like that. And now it's printing out this exact same thing. And let me scoot my window a little wider from my line length here. So, as you can see, it's, I mean, yes, it's different because I didn't capitalize it or anything. But this line right here, this react.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 JSX is converting to this react.create element. And because it's JavaScript, you can get as abstract as you want. We have this hello 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 an immediately invoked function where inside of here we return text, text, where 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 appends it. And so because this is how react.create element works, these are just different children inside of react.create element. And so this is a text node, this is a text node. This also means I could also do react.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.create element thing 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 in there, we can take in the text variable like that. And so whenever you want to have a return to JavaScript and put whatever expressions you want, you put it inside these curly braces right here. I hope everyone's following. Again, let me know if you're not and say so in the chat. But this is how react works at a very, very basic level. That being said, we want to start getting into hooks 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 react element. I've got to do the braces like I mentioned before. But what if we want to make a reusable component? Right now, again, this is react dot create element. It's not creating a component. It's just creating an element. This is just the return value of that react dot 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 react dot create 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 button here, or not a button there, lowercase button, button, and then 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 reusable component now, I can have as many buttons as I want. Look at that. They're all saying hello. And they're 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. And 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. And so I'm just going to comment 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 this 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 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 like class or ID or something, it's just like that. But in React, we call them props. And they don't have to be just straight values. You don't have to do add. You don't have to do subtract. You don't have to just do a number. You can have a function passed in too. And so, for example, if I wanted to have on click, I could have a function passed in where on click, I want it to console.log something. I'll do console.log. We added. That was not creative, but it's okay. It's the 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 on click. And I 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. Line length. Please be in there. Line length. Yes. Okay. I'm going to do 50. And that should be better. Or not. Whatever. It's fine. You know what I'll do? I'll do this. 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. Okay. But anyway, we have this button. It's on click 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 on click 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 on click to the button itself, but we're passing it in from the parent. Now, this might seem like a very, very simple. Oh, 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 anyway, or option Z. Well, that doesn't do it. Okay, 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's sent, the form was processed, you got a successful response back. And now this on success 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 react, 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, or instead of having a component that looks like this, you might have had like class button extends react dot component. And then you have a constructor and all kinds of lifecycle methods in there. That's 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 react is 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 react product 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 had the attribute about state, right? How does hooks replace that? Good question. Let's do that right now. So I'm going to import use state. All hooks are our JavaScript just like JSX is JavaScript. All of these hooks are JavaScript. I actually think a more fun name for hooks would be like use ease, because they all just start with the word use, but whatever. Anyway, let's just say that we have, 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 will work. 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. Okay. 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 this sort of prop, what 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. 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 oh, fish is not defined. That's okay. 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 on click, get it officially. Okay. Anyway, so we're going to be passing this in must be a sign and 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. Okay. Cool. Nice. All right. We're back. That pun was not planned. This is just my life. Okay. 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, but inception 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. Okay. So let's just say that we want to use this use 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 count equals zero. And we want to display the current count. And so I'm going to have a div and I'll say 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 const 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 use 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 set count. And so with use state, the parameter passed in 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. Don't yell at me. Okay, subtract. Okay. 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. I'll list that in there. But yes, that's totally allowed to have multiple things manipulate count. So 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 re-render the entire page. It doesn't do a repaint of the whole DOM. If you'll notice, Google does this little shiny purple thing right there. It's just changing the thing that changes in the DOM. And that's what's really exciting. This little tiny text node 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 like certain things to re-render because someone has logged in so they should see their profile. It won't re-render the entire page. It'll just re-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 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 get going. You can build a lot of applications with just these. That being said, with class-based 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 React. Now, if I were React, what I do when I create 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 DOM table. And the DOM table 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 a 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 DOM. So commit that element to the DOM. This isn't real React. Stop pretending it is VS code helping me out. So it commits the element to that DOM table. Now, when it commits that element to the DOM table, then it says old element is now equal to element. And now whenever 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 like that. And then it only commits that diff to the DOM. These functions are not real, but this is how it works. So when it commits only that diff to the DOM, it doesn't commit the entire counter thing. It only commits the change that happens. This is very similar to get diff, for example. Whenever you run get diff, you know how it has the plus and minus showing the exact line that changes? It doesn't commit the entire file 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 changes the state that way. When we had class based components, when you had class counter extends react.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 with 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 re-renders the entire component to the page. So it's not the kind of thing where I would do 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. I hope that makes sense. Let me know if it doesn't. But it does it, let's see, it re-renders the entire functional component every time it's called. Yes, it re-renders it, but again, the only changes that are made to the DOM are the variables that have changed. But yes, it recalls the entire function again. Okay. 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 generally how it works. You can change state on all sorts of things. Typically what I do is just primitives in here, like strings or ints or something, or booleans. You can do an object where if I were to have fish's cake 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 diff right here, when it does this diff between the old element and the new element, it does a triple equals diff which reacted in JavaScript. JavaScript is fun. So this is true, but this is false. And I'm not sure if you know why, but in case you don't know this, this is just comparing objects or whatever. But this triple 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 use state. If you want to have giant state objects like that instead of having just another state variable like error set error like this, I'll do use 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 Cassidy Williams reducers on YouTube, you will find it is the hook system, the diffs and stuff still using the react dom system. Yes, it is. We're still rendering this counter with react dom right down here. So that's how that works. Go for reducers in a nutshell. I'll try to squeeze that in. We'll see. So anyway, 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 effect 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 Pokemon API. And it seems pretty fun. And so I figured 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 Pokemon. And I'll put a function all the way at the top here and we'll just make a new Pokemon function. Function Pokemon. 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 make a Pokemon. We want it to render some kind of Pokemon's 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 use state. I'll do no. I could do Pikachu first. Just to keep it simple. And then what we'll do is we'll do Pikachu. Oh, not Pikachu. Pokemon in here. So now it's saying hello Pikachu. That's pretty fun. Cute, right? Is there a reason to use function instead of const? No. It's purely because my brain works in fun ways. But yes, a functional component can be an arrow function. I could do const Pokemon is 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. Yay. 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 Pokemon, but I want to get a user input 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 so 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 event and then set Pokemon to event.target.value. And then let's see. I want to make sure. Oh, I didn't close this. That's why it's freaking out on me. Okay. We have this on change. And then I want to have that value to be an input value. I'll just say Pokemon to start. And then oh, and type equals text. Next. We don't want any tests here. Okay. Cool. So it says hello Pikachu. If I say hello Ditto. Look at that. As I type it changes. That's so fun. Okay. But we want to get real data, not just whatever we type here. Oh, someone wants me to do jigglypuff. Yeah. 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 Poke API. And then based on that, I want to be able to get the values from that Poke API. Let's see. Someone is asking by using const and the hook, does that affect the functionality? Nope. I used const, 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 a constructor function, you could just type whatever you want here. 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.props doesn't exist anymore. It's just props and whatever you pass into props. I hope that answers that clarification for you. Okay. So anyway, we call setPokemon and it changes the Pokemon state variable. And that is what's saying. Hi, there. We should have an exclamation point just 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 jQuery, for example, that would be a more imperative style of programming. 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 two heaters. I have the wall thermostat back there. I'm a very cold person, not personality wise. I mean, like temperature. Gosh darn it. Anyway, okay, I have the temperature 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 72 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 72 degrees. And the heater adjusts accordingly. It'll be just like, okay, well, the room is too cold. I'm gonna heat up. If the room is too hot, I'm gonna let it be cooled down. Meanwhile, jQuery 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 jQuery, you need to get the element that you want, parse the element and the value that you get, then increase that value by a certain amount, and then say, okay, now document.getelement.id.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 cork board that they've printed out, and they say, okay, this is the error state. This is what this is. This is what this is. That's kind of like what react is. 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 with 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 safe 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 I'll explain controlled and uncontrolled components. So controlled components and uncontrolled components are a concept that has existed since the web has existed, but we didn't actually give it a name until react 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 no JavaScript. The user is just doing something to the DOM. 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 it 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 is a very, very brief overview of controlled. 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 controls just as a general rule of them. Okay. That being said, we want to call an API. So because we want to call an API, we're going to pull in the hook use effect, the usey use effect. So with use effect, it is named this because it is for side effects. Now, with functional components and with functional programming 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 z equals 10. And then I'll do let add is equal to a function in here that returns two 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, 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 this component or in this function whenever you use this add function. And so with react, there are side effects, and that's what use effect is 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 of here, I'll do document.title is equal to say hi to, and then the Pokemon. Like that. And then I want to listen to that right there. So now it says say hi to Pikachu. You want it to say go Pokemon? Sure. I do it for the people. Okay. I should have used a template string for this. Oh, well, 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 dependency array. So 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 ditto, and now it says go ditto in my little tab up here. And this variable, it can be a state variable, but it can be something else. This is going to be covered later, but when is use effect run? 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 life cycle methods that are in there. 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 let message equal this go Pokemon thing right here. And then I could put message inside of here, and then I'll do message like this. Now it does the exact same thing. If I do that, 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 this go Pokemon 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 this use effect. And so again, the effect 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 this substring. As a result of that, this is only on 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, I'm just going to put var in there. And then when it's an empty array, then 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 uncomponent 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 turn this back into message right here. So it happens whenever that message changes. How do you handle when nested properties of a state variable 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 manipulate it however you want. 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 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 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 let, I don't know, cake equals a thing. I don't know. Let's just say it's something that does something. I'm just going to console dot log Pokemon. And you want to call it inside of there. I'm going to put cake like this. Yes. You can do message and cake like that. And you can have as many things as you want inside of this dependency 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 functions in there as well. Okay. Let's call an API. I've been doing lots of talking. Okay. So now that we want to call this API, what we can do inside of this use effect is we can just call a fetch function. And again, because it's like component did 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 Pokemon 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 use state of, I'll just have it be null. And then const and then I'll have an error too just in case the API returns an error. And then I'll do use state. And then I'll also set that to null in case something happens. Okay. 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 image src equals image. And then I'll do an alt is Pokemon. We're going to be so accessible. Okay. Cool. So now nothing has changed, but we are set up to actually call an API. Oh dang, we just got a bunch of questions. Let's see. There's a custom hook that handles objects diffs. Yes, thank you for that. But if we want to do an async call in 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 Pokemon API. And I actually saved a little variable there so that way I don't have to type all of this out myself. There. Cool. Okay. So we have this in there. I don't have the accent on the E. I should. It's fine. Okay. So we're fetching the API. Then we're going to do, this is just JavaScript. This isn't even React stuff. We're going to do res and then res.json in 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 set Pokemon is res.name like that. And then I'm going to do set image. Image. And then inside this Poke API, there's a thing to actually get the image somewhere in there. Sprites. Front default. Okay. So it's going to be res.sprites.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. Okay. That should theoretically work. We'll find out. Oh my gosh, look at that. It did. I love live refreshes. Okay. Now we had jigglypuff before. Jigglypuff. Yeah. Look at that. What? What? And right now it's happening on every state change. Let's make sure that it doesn't do it when like we click a button or something. I'll put Pokemon and I'll put image and I'll put error. So whenever these things change, it's going to recall certain things. Look at that. We just called an API. You just do it in use effect. It's beautiful. We're setting state in there. It's cute. I'm happy. It'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, M all is better. There we go. Now we're going to catch them all. Ha ha ha. Humor. Okay. So 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 Ditto 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 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 effect is always up to date. There's some good guardrails for doing that. And the simplest one is just having a variable. Let's just say let is current equal true. My sister's calling me. I told her how to webinar. Okay. So we'll say let is current equals true. And then inside of here, I'll do if 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 effect 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 component will unmount in React class-based component words. And so inside of here, what I can do is is current is now false. And so whenever Pokemon, whenever this Pokemon function is unmounted, let's just say we'd navigate to a different page or something, or whenever the state changes Pokemon image or error, it will call this function right here. This error 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 component? Then great. 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 debouncing 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.target.value is greater than a certain length, then actually call 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 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 title. If I did 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 passed in. Voila. It works the exact same way, but now you can make 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 be just like use Pokemon state. And then when I do use Pokemon state, it has all of these values that are passed in. So your actual components itself that render all of these divs and actual HTML 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 Pokemon and just make sure that it returns the right values that need to be passed in here. And so it's pretty powerful that way. Let's see. So use effect is some kind of component did mount component will amount in class components. Yeah, it can do pretty much everything except for error boundaries, which again, that is going to be in react soon TM. Can you use asynchate 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 async right here or, you know, a wait, whatever. You would have to do it in a function and then do like async function, whatever, whatever, and then do it inside of there. The function that is passed in to this use effect right here, it has to be immediately invocable. If you put async to wait in front of it, that turns it into a promise type, and not a function and react will yell at you. But you can have as many use effects calls as you want in a component. You can have as many use states as you want in a component. You can have as many hooks as you want inside a single component. Let's see. We end at 530. So we still have some time. What if we talk about reducers, shall we? Reducers 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 reducer for it. We can. We are allowed. It's great. So in order to do that, let's see, can we use an is current on an if statement outside of use effect? Yeah. I mean, the scope of use current is inside of here. But you could put it somewhere and do something. Yeah. It's just JavaScript. Is there a way we can determine which prop updated using use effect? Yes. And it's escaping me now. But honestly, just do if statements. And that is a 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 ditto in the first slow request? Oh, and that in that mistake thing that I talked about? Yeah, you can capture it and then store it in a ref 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, let poop 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. Okay. So again, reducers, reducers 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. I can I can try. But I'm going to be sticking to generally reducer and react questions now. But I mean, hey, it might be useful to answer the questions. Could we be brief about 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. Okay. So anyway, going to talk about reducers now. What are reducers? reducers are 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 two full day workshops on this stuff. But redux, 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, it 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, 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 z thing. So let's just say you have an array and you have add that returns x plus y. And then you have let sum is equal to array.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 console.log of the sum 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 sum 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 and then adds it to four. And then you guessed it. It does 10 plus five. And then it takes that previous value, adds it 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, the initial state for your component. And so you could have some kind of reducer 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 put stuff in here, console.log, hi. There you go. Anyway, so anyway, we have a reducer state and action. And what it really does is it returns the state and then whatever action you applied to it. So let's do a more detailed example than this array thing. Let's just say you have a const 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 cake. You know what? Cake is 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 a primitive. I think that's a question. Oh, yeah. I mean, you'll see. It doesn't have to be a primitive in things. You'll see. You'll see. Anyway. So we have count is zero cake is true. User is an object. We want to apply actions to this initial state. And so I'm going to have an actions array. And then in this actions array, we're going to say, let's just say we have an action type is add. And whenever we have the action type of add, we want to increase it by two. 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 dot type is equal to add, 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 I'll do count is equal to the current state dot count, and then plus that action dot buy, which is what we're getting from up here. And I'll do the exact same thing. But with else, it's going to do else if action dot type is equal to minus. I need to do more than just an equal. How about that? Okay. Life is hard. Okay, minus. Then we'll return this whole thing. I'm going to copy it. But it's going to be minus action dot buy. 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 will return the current state, but then cake is false. The cake is a lie. Okay, cool. This is our reducer function now. So if we want to make it real, I'll just do a console dot log actions dot reduce our reducer function, and then our initial state. So now look at that we have count negative two. So we made it from zero to positive two to minus four. And then cake is false. So we have applied all of these state changes to it. Isn't that great? Oh my gosh. How about that? I'm 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 reducers work. It's great. And this is this is how the use reducer hook 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. Okay. So okay, I see so many people copying and pasting. You're welcome. And hope that's on 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 use states to use reducer. 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 reducer 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. Okay. So where did I go? Here we go. Use reducer. Now, you can use use reducer and use state all in the same component if you want to. That's totally allowed. Fun fact, if you actually look at the code that implements use state, use state is implemented with use reducer. So they actually work together very, very well. Now, with use reducer, 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 reducer function and then it also takes in an initial state object. And so I'm going to make this initial state object to have Pokemon, image and error in there. And so we have Pokemon, the initial value of that is Pikachu. And then we have, sorry about the pop up, we have image, the initial value is null, 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 Pokemon, image and then error equal state because we're getting this state value from use reducer. Okay, so that's how we get that. But we're still calling this set Pokemon 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. I'm going to turn 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 Pokemon set image, I can actually group state changes together. So instead of doing two different dispatches right here, I can do dispatch and then I'll say type is load Pokemon load Pokemon. And then when we do that, we'll pass in the response. And so I'll do name is res dot name, and then image is res dot image like that. And then Oh, I saved it, but it's yelling at me for calling these functions. Cool, we've done this res dot name res dot image thing. And now we need to take care of this load Pokemon thing right in here. So let's see. Where's my function? There it is. So what I can do is I'll make a switch statement instead of an if statement, we're going to switch on action dot type. And then inside of action dot type, we're going to have a case for load Pokemon load Pokemon. And then with these, you can make enums 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 dot name and the action dot image. So Pokemon is now equal to action dot name. And then let's see. Yeah, Pokemon is action dot name, and then images res dot image. So image is action dot image like that. I'm still getting errors on the side. And that's because I still have to get rid of some of those. Okay, 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 an error right here. And now up here, I'll do a case for error. I'll do case error. And then inside of there, we'll return state. And then error is action dot error like that. We should also have a default case. And I'll just say default is, I'll just return state. So it doesn't actually do anything. Okay, 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 Pokemon type Pokemon name. I don't know type Cassidy, because I feel like it. And then I'm going to do Pokemon is event target value. And then whenever we have the type of Cassidy, we're going to do this Pokemon. This is starting to get a little bit hacky looking, isn't it? But that is okay. Do I need error? I'm 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. Okay. Case for Cassidy. Ha, ha, ha. Bail me out. Okay. Case for Cassidy. In there, we're going to do return. And then in there, state. And then what did I call it? Pokemon? I think I did. Yeah, we'll just do Pokemon is action dot Pokemon. Okay. Now I need to get rid of the set Pokemon in there. And I think that's it. Please. Oh, thank goodness. Yay. Okay. So now this is the initial state. What if I were to do ditto? Does it do it? Why am I not getting my image? Something is up. Res dot sprites not res dot image. Thank you very much. I needed to do this whole res sprites front defaults. Good call. Thank you for letting me know. So I didn't have to 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. C dot. 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 Pokemon 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, 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 where 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. It 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 state as much as I can. But once I get past like four or five use states in a component, that's when I switch to use reducers. This feels to ad hoc. How would it show up in the wild just to export the reducer 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 reducer away. Yeah, the effect cleanup 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 debouncing. It's still called the things. I just didn't type fast enough. It technically worked, but my internet connection is fast. But yes, Andre, you're right. But my internet is fast. If I were to like thwart it in some way and then do it, it would clean it up a little bit faster. But it just made the API calls because it didn't type fast enough. Again, this isn't a debouncing lecture. But it's a thing. But yeah, if I copy and paste it, let's just say, 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. Okay, ready? Oh, wow, that was really fast. Look at that. That's amazing. The internet is cool. Anyway, technically, that's that's what it should do. More than a number of you states, I reach for user reducer 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 Pokemon? 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, ah, 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 Pokemon is loaded or when an error is called or when instead of Cassidy, 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 yeah, 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 the 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 in in this world, crazy things can happen. I'm currently working with mono 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 it in the chat before we end. One last thing someone asked about use memo 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 anyway. Cleanup functions, hey, that's kind of a pun. Use memo and use callback. 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. I'm going to do let some function. Let's just say I have some function that does a very expensive calculation. It does some calculation of things and it returns. I'm just going to return cake again. Man, 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. Let's just say we call some function in here whenever I click a button. I don't know, something like that. Or whenever the function renders. Let's just say we have something expensive in here that takes a lot of code to compile, to build, to run. Like calculating 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 React's fault because it's something that's slow. What you can do is find use memo. Use memo. And we can make it so that let's just say it does cake plus Pokemon just for this example. This doesn't make sense. But you'll see. We have this 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 dependency, right? Just like use effect. What it will do then cannot access. Okay. 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 Pokemon was declared. Okay. Don't yell at me. We're good. Okay. 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 function. It's 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 memorized, but like a baby said it. It's memorized. And then it won't recalculate and do this expensive calculation unless this value of Pokemon 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 where let's just say 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, it wraps it so that way you can only have one of those double arrow functions instead of two. That's it. So that's all use callback is. But that's what use memo and use callback is for. And so it's a way to reduce expensive calculations that you might have. That's kind of a vast explanation of it. But that's really all they are. And you'll see it a lot for if you memoize some large value that you might pull from a use effect and do that sort of thing. What's the difference between use memo and use effect with only one dependency? Use memo returns something. Use effect does not. The only thing that use effect returns is the cleanup function. But use memo 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.getup.com. I'm going to save it and I'll put it in the chat so that way 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 use state. What is the difference between set count previous count plus one? They do basically work in the same way. You can totally do that, Alan. Okay, copying and pasting. And I'm calling this wise line.js. Create a public gist 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 asking a bunch of things. Again, explain the difference between controlled and uncontrolled components. Long story short, controlled components are something that React controls the state of and uncontrolled components are things that React does not control the state of. It's just the user typing things in. So you assign both the on change and the value on the element and uncontrolled is just the value on the element. What about another hooks? You can import whatever hooks you want. Like let's just say I made this export function use document title. I can have a whole file called hooks.js 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.com slash casado. I just put that in the chat. You can ask me questions anytime. And I hope this was useful. One question, how do you eat cake if it's a lie? I don't even know. My favorite switch is silence. I was typing on this keyboard with some silence. This keyboard right next to me is also silence. I like those ones a bunch. Do I have some kind of course in Udemy or plural site? I have a Udemy one, but it's using an old version of React. I'm working on a new one that will be on scrimba and I'll release that soon. That's about it. Okay. I'll let the organizers take it away.