React useRef Hook

Introduction

The useRef Hook is often misunderstood or underused by beginners, but it plays a very important role in React applications. It allows developers to directly access and persist values without causing re-renders.

Unlike state, updating a ref does not re-render the component. This makes useRef extremely useful for:

  1. Accessing DOM elements
  2. Storing mutable values
  3. Managing timers
  4. Keeping previous values
  5. Avoiding unnecessary re-renders

What is useRef Hook?

The useRef Hook is a React Hook that returns a mutable object whose .current property persists across renders.

OR

useRef is a Hook that allows you to persist values without causing re-render and access DOM elements directly.

Why useRef is Used?

React follows a declarative approach, but sometimes direct access to DOM or persistent variables is required.

Examples:

  • Focusing input fields
  • Storing previous values
  • Handling timers
  • Accessing scroll positions

useRef solves these problems efficiently.

Syntax of useRef Hook

Basic syntax:


import { useRef } from "react";
const myRef = useRef(initialValue);

Understanding the Syntax

Understanding the Syntax


useRef(initialValue)

Creates a reference object.

.current: Stores the actual value.

Basic Example of useRef


import { useRef } from "react";
function App() {
 const inputRef = useRef(null);
 function handleClick() {
   inputRef.current.focus();
 }
 return (
   <div>
     <input ref={inputRef} />
     <button onClick={() => inputRef.current.focus()} >
       Focus
     </button>
 );
}
export default App;

Output:

When the button is clicked, the input field is automatically focused.

How useRef Works?

  • React creates a reference object
  • .current stores the value
  • Value persists between renders
  • Updating ref does not re-render component

useRef for DOM Access

One of the most common uses of useRef is accessing DOM elements.

Example: Input Focus


import { useRef } from "react";
function App() {
 const inputRef = useRef();
 return (
   <div>

     <input ref={inputRef} />

     <button onClick={() => inputRef.current.focus()}>
       Focus
     </button>

   </div>
 );
}

useRef for Storing Values

useRef can store values without triggering re-render.

Example


import { useRef, useState } from "react";
function App() {
 const countRef = useRef(0);
 const [count, setCount] =
   useState(0);
 function handleClick() {
   countRef.current++;
   setCount(count + 1);
 }
 return (
   <div>
     <h1>{count}</h1>
     <button>
       Click
     </button>
   </div>
 );
}

Difference Between useRef and useState

Feature useRef useState
Re-render No Yes
Persistence Yes Yes
DOM Access Yes No
UI Update No Yes

useRef vs useState Explanation

  • useState triggers UI updates
  • useRef does not trigger UI updates

useRef for Previous Value

useRef can store previous state values.

Examples:


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

function App() {

 const [count, setCount] =
   useState(0);

 const prevCount =
   useRef(0);

 useEffect(() => {

   prevCount.current = count;

 }, [count]);

 return (
   <div>

     <h1>
       Current: {count}
     </h1>

     <h2>
       Previous: {prevCount.current}
     </h2>

     <button onClick={() => setCount(count + 1) } >
       Increase
     </button>

   </div>
 );
}

Output: It will show

  1. Current value
  2. Previous value

useRef for Timers

useRef is useful for storing timer IDs.

Example


import { useRef } from "react";

function App() {

 const timerRef = useRef(null);

 function startTimer() {

   timerRef.current =
     setInterval(() => {

       console.log("Running");

     }, 1000);

 }

 function stopTimer() {

   clearInterval(
     timerRef.current
   );

 }

 return (
   <div>

     <button onClick={startTimer}>
       Start
     </button>

     <button onClick={stopTimer}>
       Stop
     </button>

   </div>
 );
}

Why useRef Does Not Re-render?

React ignores changes in .current.

This improves performance when UI updates are not needed.

Real-Life Example of useRef

Suppose you are build:

  • Chat application
  • Form handling system
  • Video player
  • Dashboard

useRef is used for:

  • Auto-focus input
  • Scroll management
  • Storing DOM elements
  • Timer control

Advantages of the useRef Hook

Feature Benefit
No Re-render Better performance
DOM Access Direct manipulation
Persistent Storage Keeps values across renders
Timer Handling Easy control
Lightweight Minimal overhead

Common Mistakes in useRef

1. Using useRef Instead of useState

Wrong:


const value = useRef(0);

For UI updates, use useState.

2. Forgetting .current

Wrong:


inputRef.focus();

Correct:


inputRef.current.focus();

3. Expecting UI Update from useRef

Updating the ref does not re-render the UI.

4. Overusing useRef

Not every variable needs a ref.

Best Practices for useRef

  • Use for DOM access only when needed
  • Use for non-UI values
  • Avoid replacing state with ref
  • Always use .current
  • Use for timers and intervals
  • Keep refs minimal

Real-World Applications of useRef

useRef is used in:

  • Chat applications
  • Video players
  • Form inputs
  • Animation control
  • Scroll tracking systems

Examples:

  • Auto-focus login fields
  • Play/pause video
  • Infinite scroll tracking
  • Timer systems

useRef vs Normal Variables

Feature useRef Normal Variable
Persistence Yes No
Re-render Safe Yes No
React Awareness Yes No
DOM Access Yes No

Conclusion

The useRef Hook is a powerful tool in React that allows developers to access DOM elements, store persistent values, and manage mutable data without causing re-renders.

It is especially useful for performance optimization and direct DOM manipulation.

Continue Learning React