 Hello. Hello. Hello. Thanks for tuning in. We're gonna start in a few minutes. I got the chat open I only have one screen today Which is a little bit of a bummer, so I'm gonna have to kind of switch back and forth to the chat, but If you have any questions feel free to hit me up in that and Yeah Should be fun. I'm gonna just kind of make sure I got everything set up Then I need to get set up I'm gonna start in four Minutes if you're tuning in. Oh shoot. I put 12 30 on this thing. That sucks. Oh Well, let's make sure this is working Okay, we'll start in three minutes See my mic's working perfect Face is all stretched. It's funny Change that. I hope that my connection stays up. I'm tethering off my phone. So we'll we'll see how that works All right, two minutes Water, I think they might be going a little bit late Downstairs, unfortunately, it'll be all right. I'm just gonna kind of repeat some things that we already know anyway All right, we'll start in just a couple seconds Using a pillow to clean off my Camera, hopefully that's something All right, it's 12 o'clock. Thank you so much for tuning in. I'm super excited To do a live stream about hooks. I'm in a different kind of setup today I have I'm just on my laptop usually have my screen and a mic and everything so hopefully Everything is coming through. I know that I'm kind of not Broadcasting the very top of this window So I apologize for that or what you might be missing there I'll try to dictate things if I change the URL or anything Yes, just a couple hours ago the react team Announced react hooks or hooks and they're super Freakin cool My understanding is that they're just a way to extend the capabilities of function components I've kind of been referring to them as mix-ins for function components because they solve one of the the core Problems that mix-ins did solve which was sharing life sectionality Across components and this is Just really exciting to see especially in the function component space. I know for a long time People have been talking about trying to figure out what the ergonomics and kind of how around and like how a Stateful function component might work No, well, this isn't like a stateful function component It kind of uses all of the new things and react to be able to provide these hooks into what react is What reacts doing so it can kind of like come back and and fulfill all these life cycles without you having you as the developer having to Think about the life cycles of the component and then response to those so you're like component did mount I want to do this component did update. I want to do this component will unmount. I want to do this Oftentimes those things are part of the same logical thing And if you have like if you're adding a subscription or subscribing to something like a stream channel You set it up and component did mount and then you tear it down in component will unmount But then also you might have other things that are split there too So you might have some you know, you're getting some state using the connect or something like that and that's not So we can some tweets Okay, cool. So, yeah, so that's the So that's kind of the idea is that now instead of having those things being separated by methods now They're into these being put into these hooks Which allows us to kind of think about those in a single idea like set up so in the case of use effect set up Tear down and then optimization is all gonna happen in this one isolated chunk of code Which is really awesome So I just thought that we would kind of explore That for a second. I'm just kind of I have about I'm recording a podcast in At one o'clock, so I'm probably gonna have to be out of here by like 1240 But I mostly wanted to show you how To get started with hooks the resources that you need to be aware of and visit with hooks and just kind of Play around with them so you could see see a little bit more more code motion and whatnot Cool, so first thing is I'll pull this down just so you can you can see it First thing is that if you want to get to the new docks on this you can go to reactjs.org Oops, sorry and add hooks So that that hooks will take you to wherever the docks are which is a nice little handy URL to use Here they have an introduction introduction to hooks and All of these subsections Now what we'll go over is that first this is only in this 16.7.0 alpha So if so we're gonna have to set up our sandbox environments and apps in a very specific way Okay Sorry, let me get back to a message real quick you go to react hooks and It's just my podcast guest actually no, I'll do it. I'll do it later So we have Let's see. So we have This this document. It's only 16.7 and we have these eight categories, right? So introduction to hooks hooks at a glance using a state hook using using the effect hook rules for hooks custom hooks and hooks API reference now, there's a lot of Hooks apis that were not mentioned or demonstrated today and we'll talk about that in Probably later These are like the biggies. These are the and butter hooks and these are a little bit more like specializations So I'm just going to kind of go through these three today. Now. So how does that? What do we need to do to set things up? So let me show you this code sandbox that I set up now. It's already set up with hooks So I'm going to demonstrate that We're going to pull use state off of that that named export and Say let Let's do a counter counters are always actually let's just add a piece of state. So name use state Fantastic, and then we'll use name directly. Cool. So that worked. I can change this to Whatever Okay, so this is our this is our default value for this piece of stator hidden in here in the next The next place in that array But I want to show you how to set up first. So here's the setup If I go in here into the dependencies of my code bin You'll see it might be kind of hard to see contrast wise, but I'm using sixteen dot seven dot zero dash alpha dot zero It's also available at the flag next. So if you wanted to npm install this you would go npm install reacts at next and React Dom at next that would get you react and react up Now I'm doing this in a sandbox. So a code sandbox So this um, so we add the dependencies here Um, sometimes these dependencies can be a little bit finicky. So I found that I actually have to I had to I'll just do it. I had to delete both of them For them to update appropriately. So react And then kind of like Switch off of it. I mean if you really want to be sure I've had some like weird errors with these So I switched off and switched back on and now I have the right dependency there And then if I do react um Now this might not be a problem for you. It might just be like my browser version or whatever, but You just want to make sure that you actually have the right versions Set up here because you could be really frustrated trying to import these things and use them and find out that they're not there So just make sure that they're there Cool. So we have that. Um, we have that set up now. Um, we're using use state right now This is the easiest uh, easiest one to start with. So, um, let's uh, let's play around a little bit So we have um, we're spitting out our name. Let's start with something a little bit easier and we'll do kind of that That classic Click counter So we're gonna spit out our count. Okay And let's make that bigger That's not gonna work Fun size equals I don't know 32 Okay, um, now we want to update this count. Um, and use state comes along with this really cool thing So something that you might not be familiar with is this object or array destructuring You've probably seen object destructuring a lot. Um, this is kind of the same thing but uh but with arrays So the way that works is if we were to I won't make that go away. So if we were to um Set up an array with a literal syntax we could say um, so like let um use state Equal and this is gonna it is gonna get pissed for a second. Um, but we could set it to Um an array and we could give it a value like an initial value of zero And um, we could have this like update our function, right? I'm gonna put an underscore in front of this so it doesn't get confused. Okay, um, so So we can We can set that. Um, we can set that here. So we're returning this So we're creating a literal array with a value and a function inside of it This function doesn't do anything. Um, and then when we want to use those we can then, you know, get those values off of that so that Destructuring is just kind of the opposite of whatever setup that you needed to do So we have um, uh, let's see so we would have our value and our updater from use state Okay So it's just that the opposite of setting up these literals So we use this array syntax to set it set up a literal and then we can use this array syntax to Destructure something that we know has this shape of an array and that's all that we're doing here We know that the first value is going to be the the value The initial value and then that kind of updating value in state and the second one is going to be our updater Right and um And it's nice to kind of think about these as actions. So the convention here is to say update Count and you'll see that kind of Verbally makes sense as we start constructing this this component So let's see. Um, so we have that using our array destructuring and then we have this update count We're not using it yet. Um, so let's do that. Let's add a button type button button Uh, I'm gonna just do increment Let's put a hand there points up At the middle finger come on I'll do that. Yeah. Okay. Cool. So we have this increment button now. I am pressing this nothing's happening That's to be expected because we don't have any we're not handling that So let's handle that just handle it in line, right? So we'll do on click We'll give it a function And we will call update count Now if you're used to set state and set state we've had to kind of Take the take the previous value So it looked like this previous value and then we would use that to then return, you know previous dot count plus one Here we don't with with hooks. We don't have to do that which is awesome. Um, we can just say Why did I delete all that character by character? I don't know. Um, we can just say plus one Um, because we're setting the account that in function. We're getting that value and we're just going to add to it So now in this function we call update count say update the count with the count plus one And there we go super easy Okay, so um, yeah, so that's what we got so far easy peasy. We import use state We use array destructuring to take the count And the update or function from there. We set an initial value now. We can um Set this to whatever right like it doesn't have to be zero. I'm gonna come with that Very cool. Um Yeah, so why don't we Let's try Yeah, okay. So so that's That's good for that. Okay. So let's um, look at the next kind of like big workhorse, which is use effect So I'm like not not sure how much time I want to spend on each one just because I got got places to be people waiting on me. Um So let's use use effect. Let's come up with a another example So the example that they used on stage today and the the one that I like Is might not actually work in in code sandbox um, so let's let's give it a try so The use effect. Um use effect is just called So we're not pulling any values from use effects like we were with um use state Okay, um Let's uh, yeah, let's let's see if it works First so the the example that we um saw was we um give use effect to function to to xy When this component renders and every time that it renders And in this we kind of just do whatever work that we need to do so document dot title Is uh react hooks But wait that is the title they have hi there I'm not sure that this is going to jump through the uh The the code sandbox there Okay, so That's not going to work. What's another um, let's see. Let's go to the docs Let's see if they have an example here that we can uh that we can look through that is not That is not the the one that we had Okay, so this is setting up some kind of subscription We don't have a subscription to subscribe to um Okay, so nothing there Let's uh, let's do something. Let's do something else. I have an idea Okay, so um, let's see. Hi there Okay, um Let's see How do we use i'm curious how can we just like Send values to the uh the the the body element Um, I'm gonna have to look this up because I never actually like place place values right on an element Um, so let's see so indian style Style javascript I think you can just be like style dot whatever Um equals the thing Okay Color blue style equals color blue. Okay, I'm gonna assume that there's no styles on there color red Okay, cool. Awesome. So this effect worked Hi, I'm actually good right now. Yeah. Yeah, thanks. Will you people come back in like an hour? Yeah, thanks Okay, um, sorry about that. Uh, so we have uh Okay, so what we're doing is that when this component renders when we render our app We're using use effect. We're giving it this function and we're Adding this style to the document body, um, which is awesome and you can see it take effect We we have it right over here. Let me make this uh bigger Okay, now, um, what we can do so so that works great. Hooray effects are awesome Now there are other things that we need to know about effects. Uh in order to use them Correctly. So here is the first thing. So first of all, this fires every time this component renders. Um, and I'll prove that to you So, uh, I'll console dot log updating Body styles Okay, let's see what happens Oh, okay So it it only rendered once so we need to uh, kind of give ourselves an example that's going to uh, do this so Um, we can create a function here called render Um, let's see. Let's call render Okay, perfect. Um, and then what we want to do is we want to set interval And call render every 500 milliseconds Okay Now we should start oh If you're tracking along. Oh, duh Okay, here we go Perfect. Okay. So now we are seeing that this is rendering. Um, every time and every time we are Redoing this work. Um So that is uh, that's not ideal So there's a little thing in here that you can do the second argument of um use effect Um allows you to track A value, right? So, um, let's see. Let's say so I don't have this kind of like extracted into a component yet. Um So Let's say that we only Okay, let's um, let's do this. Let's call this greeting with color shift Okay, um Okay, um So every time this greeting Renders we want to shift the color Um, and then we're going to we're going to need some kind of like value to track. So props and we'll use props dot name Uh, which means that we'll have to pass in a name Uh, okay, cool. So um So we're seeing this this this is this is updating every 500 milliseconds. Um, but now that we have a value to track We can see that yeah, unless the name changes. Um, I don't No more of those That's true. Okay. So unless the name changes, uh, I I only want you to render the the minimum number of times that you have to so I only want to track these inputs And when they change do the work again, but if they don't change, uh, like do nothing So, um, we can track in here We we give it a ray and we give it some values to track. So this is gonna be Uh props dot name. Oh my gosh Obviously, I just don't I just don't understand what I'm doing Oh, because I'm re-rendering this component every time Okay, well, let's let's uh wrap it in app. This is what these things are about We're just kind of like exploring feeling it out. See what's going on Uh You know like bump into the walls make some mistakes Okay, so we'll do um Sorry, now I'm all like now I'm all flustered return div Could use a fragment probably Greeting with color shift And this is not like idiomatic at all. I'm just Figuring this stuff out as we go along. So then we want to update our app instead No, all right. So I don't I don't have any idea what this is doing. So Okay, so we're re-rendering our app every time and these are the inputs So let's look at the docs here and see what I am missing because obviously I missed some core part of How this is supposed to be working. So Let's do it Additional hooks. We don't need additional hooks hooks at a glance state hook the effect hook Okay, so let's uh kind of like go through this piece by piece So use effect document that title. We can't use that because we're in the the sandbox environment bummer. I know This is based on the counterexample data fetching sending the description any manual changing the DOM Um, it's interesting that they put this here because I would have fetching Would be more the realm of suspense or like that would be like the natural reach for that but um Maybe just kind of like in terms of if you're gonna do it without suspense the way that we have been doing it all this time So This is an additional code. Okay. So this is talking about the cleanup. Maybe we need to focus on cleanup first Okay, cool All this is looking right so far Okay, let's um, let's focus on cleanup first And uh, let's see what happens. So I'm gonna take this out for now Okay, sorry. I thought the document title thing would work and I didn't have a second thing set up Um, I'm gonna remove this Okay, cool, um Now sometimes it can be a little bit tricky to inspect these This eye frame, but we're gonna we're gonna try it anyway. So I want to render this See that the document body was set to Have that red value Which it does Close this up a little bit Okay, and then I want to unmount Mount node at I believe is the api um And the root element Unmount not unmount Man Unmount component at node, I think it is unmount Obviously, this is not one that I use a lot component at node Okay, cool. Perfect. So we saw it go in and we saw it disappear Unfortunately, we see here That um, this is still red. So it did the it did the work and then didn't clean up after itself. So that's a bummer So we're doing the work, but how do we get it to clean up after itself? Well, we can return another function and Turn another function that does the opposite of whatever we wanted. So document pop body dot style um And I think we can just give it null here. So like take that off Yeah, everything I'm doing at a link today Document body that style See we're returning a function Drop block just in case I think I have some old Code because this is logging out updating body style Uh, even though this is not I'm not logging that out anymore and I'm not re-rendering it Something flunky is happening Okay, this is what I this is what I expected to see. So I just needed to refresh that um, so uh, what I expected to see now is that now We're setting that to null. So if I didn't do any of this work at all, um, that would not We wouldn't see that style attribute in there at all. So let's refresh that. We see there's something Something crazy going on I think a bunch of people just like jumped on the internet or something. Oh, okay. Wait, uh, so if I don't do that work Okay, yeah, so um, let's see Pissed Obviously it's a different iframe Yeah, so like I was saying it's kind of a little bit tricky to like do these uh types of inspections kind of on the these iframes Um Iframe I can't find it Anyway, trust me. So the when it says style equals That's because we were um Resetting it. So that is working. I wondered now if I can track that value and I wonder if it was just kind of an updating error props that Right. Yeah props So as long as that doesn't change um Okay, so it is red, right? Um, we know that it is um being removed Um, so let's see if we can set this back up again. I don't need that. I just need I don't need to add our console log statement again You know that the red's going in there Perfect. Okay, cool. All right. So this time we got two. So I'm not sure if that's because um, I'm not sure why but uh, it is not Uh continually updating. So, um, we can kind of see Um, verify that it should that this component keeps rendering Um, yeah, there's some like kind of like funky reloading thing going on these log statements So, yeah, so the component uh, oh component rendered the uh, that thing happened And then even though the component is re-rendering every 500 seconds 500 milliseconds We're not getting this uh, body updating style Function being called every 500 milliseconds. Um, so that is working. I'm not sure why it was weird a second ago Um, so yeah, so that second argument is what we do for that so um kind of in In summary, so the three parts of use effect are going to be the um The work that we want to do that's the first the first thing We return a function that does the the cleanup work for whatever we want to do. Um, and then that second argument After our function that has both the setup enter down Is uh, what we uh, let's see Is the inputs that we want to track When something changes so by default it's going to just be every render So and then you kind of opt out of the ever render behavior by giving it array an array of values that you want to track Um, so let's see. So that is um, those are kind of the the major workings of use effect Um, it's 12 30. I got a couple minutes left. So I thought I would dive into the other one Um, which is use context Or the other kind of bread and butter one which is use context So let's um Let's delete that And let's Let's see. So how would we set this up so span Okay, so we have this. Um, obviously all that other stuff is Still on the way Let's delete this we don't need any of that anymore Refresh that because it's stuck Okay, cool. Uh, we got uh, what we need that So Hi there Um, we want to use use context now in order to use context. We need to create context Um, so we'll pull up create context. Um I haven't looked in this at this in a while. So we'll see uh, see how this works Um, we're going to create a context outside of uh outside of our app here. So we'll call this theme context and um We'll use create context to do that and give it um, let's give it a text value for of You Fuchsia I think that takes about Um Now if we want to consume that context, um, there's a way right now where you can like pull render props off of this uh, this kind of this this returned object thing. Um So now we're not going to do that. We want to be able to use the use context which allows us to do it here Um, so let's uh, let's track that so how uh, let's see. How does it work? Um, let's go to the the docs here. Um, I don't see it in this list So we'll um, I'm assuming that it's going to be in api reference Use context So it was a const context equals use context of context. So My assumption is that we say Let theme equals uh, use context of Theme context Now this object which we use as our default value is Here I I have that available to me here. So um style um Color Theme dot text Oh my goodness. Oh my goodness. That's awesome. Uh, so that works. Uh, we can change this to green Amazing amazing, uh purple. It's not gonna be too much different from from black there Um Come on. Oh per perpele Okay, sweet. Um, so this works amazingly. Um, I got a couple minutes. Uh, let's try something else. So that's use context Pretty pretty straightforward there So i'm gonna use state and Use, oh wait, let's see. Can I do this? um I don't know if I can do this one in a code sandbox I don't think I can Okay, so maybe that's uh, maybe that's that's it for today these Okay, anyway, um I was I was gonna do like a online offline example and track the state using use state Um, but I don't know how to simulate offline in this code sandbox in a way that wouldn't actually take me offline from streaming So, um, maybe I'll just do that as a video. Um Okay, cool. So I'm gonna wrap up then 1235 we've been doing this for about 35 minutes and I have a Call that I need to get to um, so what are the things that we need to take away? So first if you're gonna react, uh j s.org slash hooks this is gonna be all the documentation Read this from top to bottom like it's not that much read the whole thing You're gonna learn a lot and then play with it as you're going through it So like when you get to here, uh, run this example Now remember if you want to run that in a code sandbox you have to go through here change the dependencies Make sure that you're on the 16.7.0 dash alpha dot zero release of both react and react dumb If you if you got that you should be good to go now some of the examples you might not be able to track with Like so this is something that's important to know you you're not going to be able to track with What is it use effect some of these effects The demos are like document dot title. You're not going to be able to do that in In the the code sandbox environment. So that's kind of a bummer You will be able to play with online offline. So you can do that Um, but just be aware that not all of these are going to work in the code sandbox So you might have to start your own like use a create react app, etc And do that. So um, so that is kind of the caveat number one After that, um, we just kind of like went through the examples that they had here for views state use effect use context You can play with the other ones use for the if you go to this api reference Anyway, we'll we'll cover some of those at a later time I'm probably going to track this a lot because this is really important to me as someone who makes tools for our designers I think this is going to be just a real hit Um, I am going to continue to write. I added a page on a react patterns I don't know if you've been to react patterns.com in a while. I'm working on updating it But I'm also working on a little thing for hooks. Um, this is a little bit more like narrative kind of walking through some examples just kind of from my perspective Um, it might be valuable to you. It might not. This is really kind of like a top Like just the tip of the iceberg. So if you find the the docs overwhelming and want just kind of like a More like narrative style. Um, this is where I am tracking that so react patterns.com slash hooks Um, and I'll link that from the from the page. Um, eventually. Um, anyway, that's it I'm going to be tracking this all week. So if you want to um, like subscribe you'll get notifications I think I don't know how youtube works. Uh, you can follow me on twitter if you have any questions Um And yeah, that's it. Um, so thanks for watching. I hope that this kind of seeing this and like bumping into the edges a little bit Uh, was helpful. Um, this is new for me. Um, but I'm super excited about it. It's super promising. Um, so yeah, thanks for watching