Get Started With React Hooks in Under 10 Minutes | useState, useEffect & more!

if you just started learning react one of the words you've probably heard a billion times by now is Hooks and after reading about them you're probably even more confused and overwhelmed because you still don't quite understand what they are and what they're used for we'll go over what they are why you should use them and how to use the most common ones in your application at the end I'll also mention a few common mistakes I've seen Junior developers make so that you can avoid them we'll do all this by building a simple small counting application so what are hooks the simplest way I found to think about them is as functions that you can use in your reactor components in order to unlock special functionality although you can write your own hooks there are plenty of these functions available provided by react so we can use or hook into native react functionality and if you're already familiar with react class components then you would have already come across a lot of this functionality hooks actually enable us to do the same things a class component can do but in a functional component just to name a few these hooks include used State use effect use memo and a lot more but the convention here is that hooks have to start with the word use you might also be wondering if a class component already had all of this figured out then why the switch that's because Hooks and functional components are arguably a lot more straightforward and intuitive it is also a lot easier to share logic between components without the need of any complex pattern and the code is also a lot cleaner and easier to understand this is what we're working with just a simple counter and a button to increase the count we'll just build on this as we go through each hook use state is by far the hook you'll use the most all we have to do is just import the hook at the top of the file then we just need to add it to our component whenever we use this hook it will return an array of two values for the state we're looking to track one is for the value and the other ones for the setter function for the value but now we can just display the count value in our UI and also update the logic for the button so that clicking on it it will increment the count without going too much into it the reason we use the setter function to update the count is because this lets react know to schedule a rerender of the component with the new changes this is also the reason we don't just use regular variables they won't trigger a render of the component when the value changes so you won't see any changes on the actual screen the second hook you will definitely come across as user effect with its purpose of Performing all sort of side effects a few examples of side effects include operations like data fetching subscriptions to event handlers or even manually changing the Dom we'll keep the code from the previous example and import the hook the same way we imported use State what we want our use effect to do is every time the count changes update the text that shows up in the browser Tab and to achieve this we just have to set up our this is the base you will notice that it takes two parameters with the first being a call back function for the logic that we want to execute every time A change is detected and the second parameter can be a bit tougher to wrap your head around but it's the dependency array which normally is just an array of either State variables or props this just tells react when to rerun the effect which will be when any of these values change you also have the option of passing in an empty array which will run the effect only when the component first mounts but emitting the array completely will run the effect after every render of the the component if you'd like to read more about some of these details I wrote a detailed article on all these hooks so check it out in the description when it comes to this next hook it can be an extensive topic which would fit in its own video but I'll try explaining it in an example as simple as possible so normally in react if you want to pass data from one component to another you pass that down as prop this is fine when you have a small number of components but for deeper component trees it can get very messy very fast you will often hear people refer to this as prop drilling where you pass props through components that don't need them just to get them to the ones that do with used context we get access to the react context which can share data across a section or the entire component Tree by providing it in a provider component which you guessed it will provide that data to the components it is wrapping like all the other hooks start by importing it now we just need to create our react context which we'll call theme context since that's what we're storing next we'll have our app component which all react apps start with and we'll wrap that in the provider for our context for this example we'll just hardcode the value light for light theme but you get the idea now inside of our counter component we can just use our context using the used context hook to grab the value from the context and that's all we have to do it can get a lot more complicated where the context can do a lot more but this covers the basics not as popular as the other hooks on this list but user reducer is still a good option to know about as it's an alternative for the US state hook but it's for managing more complex State logic first what we need is our reducer function for managing our counter value this takes in two parameters one for the current state and the other one for the action that we want to perform on this state these actions are all custom and defined by us so let's just write a switch statement to handle the increment part of things for each case we just have to return the updated state but one thing to keep in mind is you should never edit the existing state variable but instead create a copy of it and edit the copy in this case we just create a completely new object now we just need to create our state using the hook and you'll notice a couple differences here between this and use State instead of returning just one value we now get the full state and instead of returning a Setter for the state we just get something called a dispatcher the dispatcher is just a function that we use to send actions to the reducer function that we created earlier for parameters we just need to pass the reducer function that we created and a default state which in our case is just starting the count at zero the last thing we have to do is just update the onclick Handler to dispatch an action type of increment this is a very basic example the state is not very complex at all but as a challenge try to see if you can Implement another action to decrement the count on a separate button if you get stuck or having any questions let me know in the comments down below I like to think of us ref as a box in which you can store something and have the option to reach in and grab whatever you stored whenever you need it the difference though is that you can store a Dom element to allow for things like setting focus on that element and updating the value also does not trigger a component rerender unlike the state hook that we looked at to get started you just need to create your ref with its initial value then in our case we want to have an input box and whenever the count is incremented we set the focus on that input box we do that by assigning our ref to the ref value of the input and all this does is it updates the value of the ref to now store the Dom element of the input now whenever we increment our count we can use the ref to set Focus to the Dom element and there's a lot more things that you can do with this hook but these are the basics before we go into the last couple of hooks if you've been finding this useful make sure you subscribe for more weekly content with the used memo hook we are now entering the realm of performance optimizations where let's say we had a function that took in a couple parameters in order to some heavy computations that can take a while to return the result having to recalculate this on every render when the parameters don't change will just result in a performance loss with used memo we're actually able to save the result of that expensive function and only recalculate the result if the parameters change which will overall improve our performance we first import used memo and the hypothetical function that takes a while to compute we then write our hook with the first parameter being the Callback function which just Returns the result of the expensive function and then the second parameter being the dependency array where just like like use effect whatever values we put in this dependency array if the value changes it will trigger the hook to run our function again the last hook that we'll look at which is another optimization Hook is the used call back hook another tricky thing with react is that between renders it will recreate its functions meaning that the signature of the functions will change over time sound confusing because it can get pretty confusing so let's look at an example you'll notice the structure is actually very similar to used memo we have the import at the top the hook inside the component with a call back function as the first parameter and the dependency array as the second parameter although not the best example let's say we want to memorize the incrementing of the count we would just put it in here and since the function doesn't change it will only get created once so we don't need any dependencies now some mistakes I've seen some Junior developers make with these hooks are first is assuming that updating the state is a synchronous change State updates are actually asynchronous in react so when you call the setter function if you try to access the state value right away and use the new updated value you'll run into a race condition and that's because the State variable might not be updated by the time you're actually seeing it second is don't wrap everything and use memo thinking everything will now be super optimized this hook should be applied with a specific purpose and understanding of its impact as these optimizations come with an overhead and that overhead can outweigh the benefits of the hook so don't use it on regular small computations otherwise your app will just end up being slower as a result but hopefully now you feel a lot more confident when it comes to react Hooks and progressing further than through react so if you have any questions leave them in the comments and and consider subscribing

Channel: CodeBrew

Views: 354

Keywords: Reactjs, Hooks, useState, useEffect, useMemo, useCallback, useRef, useContext, codebrew, tutorial, beginners, crash course, basics, react hooks, react tutorial, react hooks tutorial, react js, reactjs hooks, react crash course, react hooks explained, front end development, web development, web development tutorial for beginners, react developer, learn react, tutorial for beginners, frontend development, usestate tutorial, useref tutorial, react usestate, learn react js, react beginner

Id: ERdbq3v2H-k

Length: 8min 30sec (510 seconds)

Published: Mon Dec 04 2023