useRef Hook | useRef vs useState

Hey everyone 👋🏻,

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

SYNTAX for `useRef`

✏ CODE for the video:

Ref Example - 1 (An Interval Timer)

As a very first step, import the useState, useRef and useEffect hooks from React.
Setup an initial state for counter and set this to a value of 0 to begin with.
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.
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.
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.
So return a function from the useEffect and let's name it as clearIdentifier.
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..
In our JSX, let us render the counter value and a button which can be used to clear the interval and stop the counter.

import { useState, useRef, useEffect } from "react"; 


const RefExample = () => { 

  const [counter, setCounter] = useState(0); 

  const identifier = useRef(null); 

  const clearIdentifier = () => clearInterval(identifier.current); 

  useEffect(() => { 
    identifier.current = setInterval(() => { 
      setCounter(previousCounter => previousCounter + 1); 
    },1000); 
    return clearIdentifier; 
  },[]);

  return (
    <div>
       <h1>{counter}</h1>
       <button onClick={clearIdentifier}>Stop Counter</button>
    </div>
  )

}

export default RefExample;

Ref Example - 2 (Working with DOM using refs)

As a very first step, let us import the useEffect and useRef hooks from React.
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.
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.
Now on the submission of the form, let us invoke a handleFormSubmission 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 :

<name_of_ref>.current.value

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 :

useEffect(() => {   
     emailRef.current.focus();
  },[]);

import { useEffect, useRef } from "react"; 

const RefExample2 = () => { 
  const emailRef = useRef('');
  const passwordRef = useRef(''); 
  useEffect(() => {   
     emailRef.current.focus();
  },[]);

  const handleFormSubmission = event => { 
    event.preventDefault(); 
    const inputEmail = emailRef.current.value; 
    const inputPassword = passwordRef.current.value; 
    console.log(`email : ${inputEmail}`);
    console.log(`password : ${inputPassword}`);
  }
  return ( 
     <form onSubmit={handleFormSubmission}>
        <input type="email" name="email" ref={emailRef}/>
        <input type="password" name="password" ref={passwordRef} />
        <button>Register</button>
     </form> 

  )
}

export default RefExample2;