useRef in React

useRef is one of the important Hooks in React. It is mainly used to store a value that persists between renders without causing a re-render. It can also be used to directly access a DOM element.

To use useRef, we need to import it from React:

import { useRef } from "react";

What is useRef?

useRef creates a reference object that contains a property called current.

const myRef = useRef(initialValue);

For example:

const countRef = useRef(0);

Conceptually, React creates an object like:

{
  current: 0
}

We can access or modify the value using:

countRef.current

The important point is that changing ref.current does not cause the component to re-render.

---

Accessing DOM Elements

One of the most common uses of useRef is accessing a DOM element directly.

For example, suppose we have an input field and want to focus it when a button is clicked.

import { useRef } from "react";

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

  function handleFocus() {
    inputRef.current.focus();
  }

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

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

export default App;

Here, inputRef is attached to the input using:

<input ref={inputRef} />

After React renders the input, inputRef.current refers to that actual DOM element.

Therefore:

inputRef.current.focus();

directly focuses the input.

Real-world example

Think about a TV remote. The remote is used to directly control a particular TV.

Similarly:

useRef
   ↓
Reference
   ↓
DOM element
   ↓
Direct interaction

---

useRef Does Not Cause Re-render

This is the most important difference between useRef and useState.

With useState:

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

If we do:

setCount(10);

React updates the state and re-renders the component.

But with useRef:

const countRef = useRef(0);

countRef.current = 10;

The value changes, but React does not re-render the component.

We can remember it like this:

useState
value changes
     ↓
re-render
     ↓
UI updates


useRef
value changes
     ↓
no re-render

---

useRef vs useState

Both useState and useRef can store values, but they behave differently.

useState	useRef
Stores state	Stores a mutable reference
Changing state causes re-render	Changing current does not cause re-render
Used when UI needs to update	Used when UI doesn't need to update
Updated using setter function	Updated using .current
Example: counter displayed on screen	Example: timer ID or DOM reference

For example:

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

Changing:

setCount(5);

causes a re-render.

Whereas:

const countRef = useRef(0);

Changing:

countRef.current = 5;

does not cause a re-render.

---

Important Point About .current

Whenever you use useRef, remember the current property.

const myRef = useRef(null);

The value is accessed using:

myRef.current

For example:

const countRef = useRef(0);

console.log(countRef.current);

Output:

0

We can change it:

countRef.current = 10;

Now:

console.log(countRef.current);

Output:

10

But React does not re-render just because current changed.

---

Conclusion

useRef is a React Hook used to create a persistent reference. It is especially useful when we need to access a DOM element directly or store a value that should survive between renders without causing a re-render.

The easiest way to remember useRef is:

useRef = Remember a value + Access a reference + No re-render

The two most important ideas are:

useRef
   ↓
current
   ↓
1. DOM reference
2. Persistent value

And the most important difference is:

useState → value change → re-render

useRef → current change → no re-render

Once you understand these two concepts, useRef becomes much easier to use in React applications.