React Hooks : useRef and forwardRef
Hi, it’s me again! Today I’ll show you useRef hook and forwardRef in react. So, let’s start with useRef hook.
The useRef provides a referance to particular element, and you
can access it using that reference. Well what does this mean? For instance, when we’ve form elements and need to reference these elements to either print their value or focus these elements etc. Let’s start with an example to make more sense.
So, this is a form that we enter our informations here, and our aim is when we load the page the focus should be on the username, because that’s the starting of the form. When we fill input and click enter the focus should go to the password, then we enter password and click enter, focus should go to the login button and we should automatically login the page. So, we don’t really have to use our mouse at all. We will use useRef to achieve this, let’s try it.
Firstly, we need to have something where we can actually focus on the username when page loads. Well, I used an useEffect for that, because we want to know when the page is finish loading. Then we’ll focus on that username.
For this, we need to access these elements, so we can focus on them. I created ref for all three elements which are userNameRef, passwordRef and loginRef. When the page is loads, all I can do is using this reference to the username. This is provided by accessing the element with current. So, every useRef reference should have a property called which holds the reference.
By this means, when the page is refreshed, the focus will be on the username input even if we don’t click input. However, when we click enter, also want it to focus on the input below. To solve this, we need an event and
that event is onKeyDown. Let’s see.
I created 3 functions for keydowns. I need to know if the key is equal to the enter, so I checked that with a synthetic event. I did the same for passworKeyDown. Then, I also added an alert to see a result when the login button is clicked.
Finally, I added onKeyDown event to my 2 inputs and buttons, and called the functions which I created in.
Thus, while filling the inputs, we moved to the other input and focused on without using a mouse.
I hope I was able to explain what useRef does. Well, there is one more point we should mention. The input is a jsx element in the example that I gave, but what about a component? How we deal with that? At this point forwardRef comes into picture. Purpose of forwardRef is forwarding the reference into component. Let’s write an example to understand better.
Firstly, I created a basic Input component, then passed props we need here. Our first argument should be props which are type, onKeyDown and placeholder, then we get ref as a second argument here.
Then, I used forwardRef and wrapped my input in this. There is only one easy part left!
Here, all we need to do is to import the Input component and convert the inputs with jsx elements into components. Now, it will work the same way as in useRef!
To sum up, useRef refs jsx elements, forwardRef refs components.
We’ve come to an end of this article, see you in next!
