What are React hooks?

hey it's Lee Halladay and I've got a little video to show you today and if you were on Twitter or the Internet at all yesterday and you're into react you probably saw that the next version of react is gonna have something new called hooks so I wanted to produce a quick video that just shows you how you can start using them they're obviously just an alpha right now but it's fun to play around with them and we're gonna refactor a component with some state to use hooks instead so let's take a look I've got this little app here and it's it's meant to be part of a larger app so there's just the beginning of it but basically it's got a form where you can enter in github token and then it will eventually pull your starred repositories down from using the graph QL API so it's got a little form you can enter that in and it will save your token in session storage that when you refresh the page you don't have to retype it in every time let's take a look at how that's done then so first thing to note in this little app is that it's a crate react app but I've bumped up the react and react Dom versions to next so that I can have access to the Alpha features and then let's take a look at the app component so you come in here it is a class-based component which has some state namely just the token that I talked about so we're gonna use some of the the lifecycle functions here inside of our our class component component in mount and that's so that when I load the page for the for the first time after I've previously entered in my token it will set the token state from session storage so we'll just say session storage get item and we'll grab the token so that the user doesn't have to re-enter it every time I've got another function here called set token which receives the token and it does two things with it it puts that token into session storage so that it's there for the next time you load the page and it also updates the state right here so down in our render function we grab the token from state and then right now it's a very it's the start of the app as I mentioned so it just returns a div with an h1 and if it has a token we just show that token eventually this is where we put more logic to to make a graph QL query using this token but for now it is what it is otherwise meaning we don't have a token we use the token form and we pass along the set token function that the form can call when when the user enters that token into the form so we just take a quick look at this um it is also a class-based component which has a form it's got one input here with a ref on it so that I can grab the the value from it and when you hit enter which submits the form it's going to call the on submit event function and then what we do here is prevent the actual form from submitting using event I'll prevent default we grabbed that set token function that was passed down from the app right here and then after grabbing the token value from the input ref as long as they entered one we will call that set token function passing the token up which if you remember back here token arrives it gets put in session storage and then it that gets put into state as well so if I just come into here and I remove my session storage clear it out refresh it's not here I enter it in and I hit enter to submit the form it's now in here as many times as i refresh so let's refactor this quickly from a class-based component to a functional component and previously if you had a functional component you weren't really able to use State with it because there was nowhere to put that state so typically you'd use functional components more of like a pure component style where all they do is receive some props and render some something to display some state passed down from its parent but now we can use functional components which essentially have their own state so what we're going to do is eventually we'll just delete this whole thing but we'll keep it here for now we're going to export default function and we'll call it the same thing app and it's freaking out a little bit because I have to export defaults but we'll clean that up so the first thing we want to do is we do want some state now with a token value so what we'll use instead is a new hook called use state so use state when you call it the first time this app function is called it's going to call you state and what you pass into the use state function should be the initial value that it's half that it has so it's like up here where we set it to null but then later in component did mount we set it to the session storage token value here so what we can do above is actually just grab this little line here and put it here so that the first time it loads it's going to grab the token from session storage and use that as its initial value and what this returns is an array of two things but we can use destructuring to to strip those out so the first thing in this array will be whatever is returned in and stored in this eight property so we're restoring the token here so we'll call this token the second thing it returns is a function very similar to this set token function here where whenever you call it and you pass it a value it's going to put that value into the state so we will call that a set token so you don't need to define this function anywhere it gets defined and returned by you state okay so now I've got the token and I can simply return this coat here so I've got token which came from you state if that's there I show the token otherwise I render the token form but just keep an eye here we're not in a class anymore so there's no longer this it's just a local variable from here so I just remove that okay so let me just comment that out and we'll see if it works okay it seems to be working it's loading from session storage it's putting the the variable here and the function here and everything looks to be good so next thing we need to cover is well what happens when we set the token we don't just want to put it in state we also want to do something else we want it to have some other effect and in our case the effect is that we want to put the token also into session storage so for that you can use another hook that is provided in the next version of react called use effect and essentially what use effect is is it's almost like a component did mount and it will get called once sort of every time that this code rear Enders because of a state change so what we do is we call use effect put some extra space in here and you give it a function so we'll just pass an arrow function here and what we want to do in our arrow function is take this token that's in state and write it to session storage so now that I've essentially recreated all of this class based component using a functional component and the new to cook functions provide and react we can chop off component here since we're not using that anymore and clean up our code below and we'll just make sure it's working so once again I'm just gonna clear out my session storage so that I can re-enter this so I refreshed this it doesn't have it anymore they enter it in submit the form and now it's here and this is how you go from having a component with class-based component with state and switch that up to a functional component using the new hook functions provided in the the next version of react which if you're watching this in the future I believe it will be react version 16.7 which is now in alpha cool hope you enjoyed it I'm sure we're going to find many different ways to use these hooks I've seen stuff coming down from from Michael who created a mob axe and immer and some of the other people that have open-source libraries so I feel like it's gonna be used anywhere and it's probably gonna make integrating things like mob backs or redux or even routers like reach router a lot easier hope you enjoyed it have a great day take care right

Channel: Leigh Halliday

Views: 4,013

Rating: 4.915493 out of 5

Keywords: react, javascript, hooks, state, effects

Id: t5KfrHnB7u8

Length: 9min 52sec (592 seconds)

Published: Fri Oct 26 2018