Learn Custom Hooks In 10 Minutes

in this video I'm gonna show you how to create your very first custom react hook and it's much easier than you think also if you want to learn react in depth everything you need to know make sure to check out my full react course I'll link down in the description below let's get started now welcome back to web dev is simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to my channel for more videos just like this one to get started I have a very basic react application where we have a single state for our name and then we have a single input where we can update that name as you can see on the right we can type in our name and it's going to work just fine but when we refresh the page this name is going to clear itself out because we're not persistent anywhere inside of local storage so what I want to show you how to do in this video is to create a custom hook which is going to allow us to store variables inside of local storage but we can use it just like we would use the normal huge state hook so when you're creating a custom hook the very first thing that you need to do is to give it some form of name and you want that name to start with use this is just a convention that react uses for creating custom hooks and if you start your name with that use prefix is going to allow react to do all of these extra linking and error checking rules for you to make sure that your code is going to work as you expect it to so let's create a brand new file we're going to call it use local storage because essentially this is going to be just like use state but it's going to be for using local storage and here you just want to take and export a normal function we're going to export default function called use local storage and inside here we're going to do all of our code for actually persisting our data to local storage and since I want this hook to work essentially exactly the same as you state I want it to return the exact same thing as you state so we want to return our variable as well as our update function so inside of this hook what we can do is use other hooks built-in to react so what I want to do is just import the use state hook from react so we can say from react and now in here I can set up our basic state we can say that we want to have a value and a set value we're going to set that equal to use state just like that and then we can return these so we can return whoops value and set value just like that and now our return from this used local storage is exactly the same as used state over here it's going to return a value as well as a function for setting that value and the main reason that I'm doing this is because it makes it so much easier when we want to use this new local storage hook we can just essentially come in here and say use local storage and now it's going to work exactly the same as our current use state does all we need to do is set up some code for taking in our initial value so we can say initial value and we can just set that initial value here essentially all we've done is take a hook and wrap you state inside of it so now we have a new custom hook which uses you state on the inside now obviously this is not very useful because we're not actually persisting anything yet so let's create the logic for persisting our data as well as for taking our data out of local storage so let's first do a function for getting our data we can just say function get saved value and this is going to take in a key as well as an initial value so this key is going to be what we want to store this as in local storage we need to get this in from our local storage so on our example we can just pass in a name string here and then inside of our local storage we're going to save a value with the key of a name and by default it'll have an empty initial value so now instead of here we have that key and we can use that key to get our saved value so inside of here what we need to do is just say local storage get item of key and this is going to get whatever we have stored at that key location we just need to convert this to JSON so we could say JSON dot parse of that information right here and this is going to be our stored value we could say say value is going to be equal to that and now if we have a saved value so if we previously were on this page and saved some information we just want to return that saved value otherwise we're going to return our initial value down here but if we want this to work exactly the same as used State something you'll remember is use state can take not only a value but it can also take a function as its input so we need to check to see if this initial value is a function and call it so we can just say if initial value instance of is a function then we want to return whatever comes out of initial value when we call it otherwise we'll just turn the default initial value since we know it's not a function it's an actual value and now what we can do is inside this use state we're going to use the function version we're just going to return here only in our get saved value with our key and our initial value and the reason we're using the function version here is because we don't want to always call che on par sand called local storage every time we rent our component because it's pretty slow so we're only going to do this once the first time our component loads when it needs to get that initial value so now if we save you should see nothing really changes everything over here works as before and that's because right now there's nothing in saved value so it's just going to skip this and return down here our initial value and we can even check to make sure the function version works by coming in here and passing a function that's going to return an empty string and if we save we should still get everything working as before which is exactly what we want let's just move this back to be this version because we don't actually need the function version and now inside of this used local storage hook we need to actually write our code for updating and saving our value to local storage and the easiest way to do that is going to be with the use affect so we can just come down here create a new use of effect we want this use effect to save our value inside of local storage we can say local storage dot set item we're going to pass it the key that we want to set it to and we're going to pass it our value which is just this value here and we only want to do this when our value changes so we can just say whenever our value changes we're going to run this hook to actually update our value and we can't just set an actual value we first need to stringify this because you can only ever pass string values to local storage so we're going to convert this value to a string no matter what before we save it to local storage now if we save you'll immediately notice down here I have our local storage pulled up and you can see we have a name value with an empty string by default and as I type in here you can see that local storage value is being updated as I type and most importantly when i refresh our page you can see our value stays persisted because we're saving it inside of local storage but the most important and crucial part of this custom hook is this code you know it might be a little bit complicated or difficult to read but the great part is inside of our app here we just use that hook just like you would use state or use effect it doesn't really matter how it's implemented you just need to use it and it's going to work no matter what and we can use this in any component throughout our entire application and it's just going to work and the great part is this has the exact same format as our use state hook the only difference is we have to pass it and key other than that it works exactly the same now before I finish this up I want to show you how to create another type of custom hook we're just going to come in here create a new file we're going to say use update logger J s and what I want this hook to do is I want to every time a variable changes I want to log that variable to our console so we can of course export our default function use update logger and it's going to take in some form of value and whatever this value changes I want to log back to the console so this is going to be pretty straightforward we of course need to use use effect so we can actually check for these changes we're going to get that from react and then all we need to do is just create this use effect this year's effect is just going to console dot log our value whenever our value changes so instead of here we'll just paste in our value as our only dependency we don't need to return anything or do anything with this hook other than this now instead of our app we can use that hook first we need to import it though so use update logger from dot slash use update logger and then we can just say use update logger with our name values every time our name changes we're gonna log it out so if we go into our console here clear this out and we start making changes you see it's going to log out that every single time we make a change to this input value and again just like our other used local storage hook we can use this use update logger hook anywhere in our application with any value that we want and it's just going to work that's the real power of hooks is you can encapsulate logic inside of a custom hook and share that in your components which is something that was really difficult to do before custom hooks so that's why I love custom hooks is so much and that's all there is to custom hooks and react if you enjoyed this video make sure to check out my full react course which I'm going to link down in the description below where you can learn everything you need to know about react thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 82,395

Keywords: webdevsimplified, react hooks, react tutorial, react js tutorial, react hooks tutorial, react hooks project, learn react hooks, learn react js, react beginner, javascript, js, learn custom hooks in 8 minutes, custom hooks, react js custom hooks, custom hook, react custom hook, custom hooks tutorial, reactjs custom hooks, react js custom hooks tutorial, custom hooks react js, learn react custom hooks, react custom hooks js, react custom hooks function, react, react custom hooks

Id: 6ThXsUwLWvc

Length: 9min 38sec (578 seconds)

Published: Tue Jul 14 2020