The Hidden Power of useRef in React

1.Introduction

When learning React Hooks, most developers immediately focus on hooks like useState and useEffect. While these Hooks are extremely important, another powerful Hook that often gets overlooked is useRef.

At first glance, useRef may seem confusing because unlike useState, updating a useRef value does not re-render the component. But once you understand how it works, you’ll realize that useRef is one of the most useful Hooks for handling DOM interactions, storing mutable values, and improving performance in React applications.

The useRef Hook allows developers to:

• Access DOM elements directly

• Focus input fields

• Store values between renders

• Manage timers and intervals

• Avoid unnecessary re-renders

In modern React applications, useRef is commonly used behind the scenes for things like form handling, video controls, scroll tracking, and performance optimization.

In this blog, we’ll explore what useRef actually is, how it works i
nternally, and where it is used in real-world React projects with practical examples and beginner-friendly explanations.

2.What is useRef in React?

useRef is a React Hook that lets you reference a value that’s not needed for rendering.

In simple terms, useRef gives you a way to:

• Directly access DOM elements

• Store mutable values

• Preserve values between renders

Unlike useState, updating a useRef value does not re-render the component.

3.Why Do We Need useRef?

Sometimes in React, we need to:

• Focus an input field

• Access a button directly

• Store timer IDs

• Remember previous values

• Work with DOM elements

This is where useRef becomes useful.

Think of useRef as a special storage box that React remembers between renders.

4.Syntax of useRef

const ref = useRef(initialValue);

Example:

const inputRef = useRef(null);

Here:

• inputRef → Reference object

• null → Initial value

5.Understanding How useRef Works

useRef returns an object like this:

{
  current: value
}

Example:

const myRef = useRef(0);

console.log(myRef);

Output:

{
  current: 0
}

The actual value is stored inside:

myRef.current

6.Accessing DOM Elements with useRef

One of the most common use cases.

Example:

import { useRef } from "react";

function App() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />

      <button onClick={focusInput}>
        Focus Input
      </button>
    </div>
  );
}

How this works:

1. inputRef is connected to the input element

2. React stores the DOM element inside inputRef.current

3. When button is clicked:
   

inputRef.current.focus()

• Input field gets focused

7.useRef vs useState

This is one of the most important concepts.

useState	useRef
Causes re-render	Does NOT cause re-render
Used for UI updates	Used for storing mutable values
Updates visible data	Stores values silently

8.Example Difference

Using useState:

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

Changing state updates the UI.

Using useRef:

const countRef = useRef(0);

Changing:

countRef.current++;

will NOT re-render the component.

9.Storing Previous Values with useRef

useRef is useful for remembering old values.

Example:

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

function App() {
  const [count, setCount] = useState(0);
  const previousCount = useRef();

  useEffect(() => {
    previousCount.current = count;
  }, [count]);

  return (
    <div>
      <h1>Current: {count}</h1>
      <h2>Previous: {previousCount.current}</h2>

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

Here:

• count stores current value

• previousCount.current stores old value

10.Real-World Use Cases of useRef

You’ll commonly use useRef for:

• Focusing input fields

• Accessing DOM elements

• Managing timers

• Storing previous values

• Preventing unnecessary re-renders

• Video/audio controls

• Scroll position tracking

11.Simple Analogy for Understanding useRef

Think of useRef like a hidden notebook inside a component.

React remembers the notebook between renders, but changing the notebook does not update the screen.

Example:

useState  → updates UI
useRef    → stores values silently

12.Final Takeaway

useRef is a powerful Hook that allows React developers to directly access DOM elements and store mutable values without causing unnecessary re-renders.

While useState is used for updating the UI, useRef is mainly used for storing values behind the scenes and interacting with the DOM efficiently.

Understanding when to use useRef instead of useState is an important step toward becoming a better React developer because it helps improve both performance and code organization.