4.8 Introducing the `useRef` Hook
In this lesson, we will cover one final hook. This hook is known as the
useRef hook, and it is going to help provide a better user experience by setting the focus on an input in our
AddGuestForm when the app loads.
1.Getting Started4 lessons, 16:04
2.Creating the Guestbook Components4 lessons, 26:13
3.Using Hooks in Functional Components2 lessons, 12:28
4.Creating and Editing Guests8 lessons, 52:32
5.Conclusion1 lesson, 01:40
4.8 Introducing the `useRef` Hook
As I mentioned previously, when we load our components, whether it's the add form, or add guest form or the edit guest form, I want to be able to initially give focus to the first input box in that form, so that the user doesn't have to do a lot of excessive clicking, just being able to bounce back and forth, and get right into typing and tapping and whatever is very useful. And something that I like to be able to do, so I want to give that gift, to my users. So, the way that we're going to do that, is through the use of another hook. So, let's go into our add guest form. And, within here we're going to have our USE state, which we've already used. But now, we're going to bring in a new one called USE ref. And in addition to this, we're also going to actually bring in our USE effects, so that we know when this component has loaded. So, we know what use effect is USE ref allows us to basically create a reference point to something within our component which is typically going to be an element. And be able to keep track of that, have a reference to it, so that I can programmatically or imperatively interact with it through the current property of the reference that we create. Now, that's a lot of words. Now, let's go ahead and see what that actually means. So, the first thing that I'm going to do is I'm actually going to create a new constant here. Then, I'm going to say, concentrate and call this the name input element or el. And I'm going to set this equal to the useRef function, and it's going to want an initial state at this point, I don't really need one, so I'm just going to leave it as null. So now, I have this reference that I can use anywhere within my application programmatically and in the actual JSX as well. So, the first thing that I want to do, or the next thing actually that I want to do is I'm going to use my use effect loader here. So, I'm going to say useEffect, and I'm going to execute a function here. And then within here, I am going to call another function I could say something like set initial focus just because I want to have another another function that I can call, and so all that's going to happen in here in my constant SetInitialFocus function is I'm gonna set this equal to no input parameters. And, at this point, all I want to do is I want to use that name input element. And I'm going to access its current property and the current values, whatever we're going to assign or reference to later on, so I can get access to whatever it is, and then I can use a function on here called focus, and that will assign focus to whatever element is currently in that current property. So now, all we're left to do is assign this reference to something and actually refer to it. And the way that we do that is will come down into our form down here into whichever one of these elements we want to assign that focus to when this thing loads. And in our case, we're going to have it be the guest input right here. And all we'll do is we'll come in here after the required, and we'll go ahead and use the ref attribute which is another JSX attribute, and will simply set that equal to the name input element. And that's all we have to do by making this assignment to a reference and having that name input element created as or with the useRef hook, now we have access to this input element or any element that we assign it to, and then we can refer to that element using this dot current property. So, once everything is saved and we reload and I'm actually going to to have to give this focus, so now, if you see if I reload my application or reload my component, by default this is going to be set as having the initial focus, which is a really nice piece of functionality. So now, I can come in here and I can just start typing if I want to. So, that's another very useful and handy hook when you are creating these react hooks applications.