Demystifying the useRef Hook in 6 minutes

In this video, we will learn about the useRef hook in React. This hook is very similar to the useState hook that we had learnt earlier in the sense that it also persists the values across re-renders but unlike useState, useRef does not cause a re-render of the component. We will see a couple of examples to understand this hook in great detail..

frontend javascript reactjs

When to use the useRef hook ?

Hey everyone 👋🏻,

In this article, let us learn about a very special React Hook called as the useRef hook and understand how and when to use it.

What is the useRef hook ?

useRef hook is something that I briefly discussed in one of my articles where I described useRef hook as something equivalent to

Removing the state updating function from the useState, so basically just extracting the piece of state and take away the ability of state updation. This is something that will be equivalent to the useRef hook. I also discussed in that article that both the ref and state values persists across renders, so it is not the case that on every subsequent re-render they get set back to some default. So do make a note of the above points.

useRef is a React Hook which accepts a single argument as the initial default value and gives us something called as a ref. A ref is kind of an object that has a property called as current.

Let us see an example :

function SomeComponent() { 

    const usernameRef = React.useRef(''); 
    const handleSomething = () => { 
       usernameRef.current = someOtherValue; 

Now the things to note here is that usernameRef.current is used to access the value of the ref and if we want to update the ref value, then we can simply do so by setting usernameRef.current to a value of our choice.

To know more about refs, check my existing article on useRef hook. Here is the link for the same :

Image description

In the above article, I have also taken some examples where I have demonstrated the usage of the useRef hook, we have discussed :

1. Ref Example – 1 (An Interval Timer)
2. Ref Example – 2 (Working with DOM using refs)
3. The third thing that we discussed in that article was :

useRef just like useState persists a value across renders but unlike useState it does not trigger a re-render of the component.

So in essence,

useRef = useState – state updating function

If you don’t know about the useState, no worries. You can learn about the same in this article :

Let’s sum up what we learnt :

A ref is a plain JavaScript Object
{ current: <some_value> }

If you want to create a ref with the current value as null, then you can also make use of the createRef method,

This gives us :
{ current: null }

Next, useRef(someInitialValue) also gives us a ref { current: someInitialValue }. The interesting thing about useRef is that it memoizes this ref so that it stays persistent across multiple renders of the component.

Another point to make a note of is that :

useRef(null) is basically equivalent to useState(React.createRef())[0]
But this kind of abuses the functionality.

Lastly, we learnt that useState causes a re-render in contrast to useRef. The state and the ref values (both) persist across re-renders.

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter :

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

javascript reactjs

useRef Hook | useRef vs useState

⭐ useRef hook

| useRef vs useState

Hey everyone ,

In this article, let us understand the useRef hook in React.js


       CODE for the video

                  Ref Example – 1

             (An Interval Timer)

  1. As a very first step, import the useState, useRef and useEffect hooks from React.
  2. Setup an initial state for counter and set this to a value of 0 to begin with.
  3. Next let us setup an identifier ref using the useRef hook and set this to an initial value of null to begin with. We are using a ref here instead of a normal variable because we want the identifier ref to persist its value across renders. Also if it changes, it won’t cause a re-render of the component.
  4. Next setup a useEffect hook and here let us setup an interval using the setInterval function and here we want to update the value of counter each time after 1 second.
  5. We can persist the interval value by setting it to the current property of  the identifier ref as shown below. This we will also use in just a second to clear the interval that gets setup when the component unmounts.
  6. So return a function from the useEffect and let’s name it as clearIdentifier.
  7. So define the clearIdentifier function as an arrow function and here we can just call the clearInterval function passing to it our ref value i.e identifier.current Remember the useEffect will only run once after every initial render as we have passed an empty array of dependencies..
  8. In our JSX, let us render the counter value and a button which can be used to clear the interval and stop the counter.

Ref Example – 2 (Working with DOM using refs)

  1. As a very first step, let us import the useEffect and useRef hooks from React.
  2. Setup two refs, one for email and other for password i.e emailRef and passwordRef and set them to an initial value of empty quotes to begin with.
  3. In the JSX that we return, let us setup two input fields inside a form element, one for email and other one for password, and place the created refs on each one of them respectively i.e emailRef on the email field and passwordRef on the password field.
  4. Now on the submission of the form, let us invoke a handleSubmission method. Here we want to tap the values of email and password from the form fields using the refs. So to access the value of an input field using the refs, we can just say :  So to access the value for email from the form, we can say emailRef.current.value and to access the value for the password from the form, we can say passwordRef.current.value. So let us just log them to the console.

    Next let us setup a useEffect hook and on the initial render, let us just set focus on the email using the emailRef. So for this, add the following code :

      useState vs useRef

If you prefer video over article, then check this video where I cover about the useRef hook with the exact same examples.


Thanks for reading !