April 25, 2025
React has come a long way in how it helps developers manage state, side effects, and references to DOM elements. One such powerful tool in the React Hooks is the useRef hook.
In this guide, you’ll learn everything you need to know about React useRef. I’ll cover what it is, when to use it, and how it can help with direct DOM manipulation and performance optimization. Whether you’re working with react useRef TypeScript or just exploring how useRef in React works, you’re in the right place.
Modern web apps are interactive. Sometimes, you need to access the DOM directly to focus an input, scroll an element, or integrate with third-party libraries. Also, optimizing performance is crucial. Avoiding unnecessary re-renders helps keep apps smooth.
This guide will walk you through how to use React useRef effectively, including real-world scenarios and code examples.
useRef is a React hook that returns a mutable ref object. This object has a current property that holds any value you assign. Unlike useState, updating a ref doesn’t trigger a re-render.
Core Usage:
Example:
const myRef = useRef(null); // Initializes with null
Anatomy of a useRef Object
The object returned by useRef() has just one property:
myRef.current // Holds the value or DOM element
Use useRef when you need:
This makes useRef perfect for tasks like:
Before using useRef, make sure your component is functional. Hooks don’t work in class components. useRef is built into React. It’s lightweight and won’t slow your app unless you misuse it.
Before using useRef, you need to import it from the react package.
import { useRef } from ‘react’;
After importing, declare a ref using useRef().
const myRef = useRef(initialValue);
initialValue (optional): The starting value of myRef.current.
Example:
const inputRef = useRef(null); // For DOM elements
const counterRef = useRef(0); // For mutable values
The ref object (inputRef) has a current property.
Changing current does not trigger a re-render (unlike useState).
To interact with a DOM element (like an <input> or <div>), pass the ref using the ref attribute in JSX.
function TextInput() {
const inputRef = useRef(null); // Initialize ref
const focusInput = () => {
inputRef.current.focus(); // Access DOM element
};
return (
<div>
<input ref={inputRef} /> {/* Attach ref */}
<button onClick={focusInput}>Focus Input</button>
</div>
);
}
How It Works:
Once a ref is attached to a DOM element, you can access it via ref.current.
function MeasureBox() {
const boxRef = useRef(null);
useEffect(() => {
if (boxRef.current) {
const width = boxRef.current.clientWidth;
console.log(‘Box width:’, width);
}
}, []);
return <div ref={boxRef}>Measure Me</div>;
}
If you’re using TypeScript, you can strictly type refs for better safety.
const ref = useRef<ElementType>(null);
import { useRef } from ‘react’;
function TypedInput() {
const inputRef = useRef<HTMLInputElement>(null);
const focusInput = () => {
inputRef.current?.focus(); // Optional chaining (safe access)
};
return (
<div>
<input ref={inputRef} />
<button onClick={focusInput}>Focus</button>
</div>
);
}
Why Type Refs?
Prevents incorrect DOM methods (like trying to focus() a div).
Improves autocomplete in IDEs.
One of the most common use cases for useRef is interacting directly with DOM elements. Unlike useState, which triggers re-renders, useRef allows you to access and modify DOM nodes efficiently.
In this section, I’ll explore practical examples of how to use React useRef for DOM manipulation, including:
A classic use case for useRef is programmatically focusing an input field when a button is clicked.
import { useRef } from ‘react’;
function FocusInput() {
const inputRef = useRef(null); // Initialize with null
Attach the ref to an input element:
return (
<div>
<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>
Focus Input
</button>
</div>
);
Access the DOM node with inputRef.current:
Why This Works
Another common scenario is scrolling to a specific section when a button is clicked.
function ScrollToSection() {
const sectionRef = useRef(null);
Attach the ref to a <div>:
return (
<div>
<button onClick={() => sectionRef.current.scrollIntoView({ behavior: ‘smooth’ })}>
Scroll to Section
</button>
<div ref={sectionRef} style={{ height: ‘500px’, background: ‘lightblue’ }}>
Target Section
</div>
</div>
);
Trigger scroll with scrollIntoView:
behavior: 'smooth' enables smooth scrolling.
When to Use This
Navigation menus with anchor links.
Scrollable lists where you want to jump to a specific item.
Sometimes, you need to get an element’s dimensions (width, height) or position (X, Y coordinates).
function MeasureBox() {
const boxRef = useRef(null);
Use getBoundingClientRect() to measure the element:
useEffect(() => {
if (boxRef.current) {
const { width, height, top, left } = boxRef.current.getBoundingClientRect();
console.log(width, height, top, left);
}
}, []);
Attach the ref to a <div>:
return (
<div ref={boxRef} style={{ width: ‘200px’, height: ‘100px’, border: ‘1px solid black’ }}>
Measure Me
</div>
);
Practical Use Cases
Dynamic resizing of components.
useRef is also useful for controlling media elements (video, audio) without re-rendering.
function VideoPlayer() {
const videoRef = useRef(null);
return (
<div>
<video ref={videoRef} src=”example.mp4″ controls />
<button onClick={() => videoRef.current.play()}>Play</button>
<button onClick={() => videoRef.current.pause()}>Pause</button>
</div>
);
No unnecessary re-renders when play/pause is toggled.
Direct access to the DOM element’s methods.
| Feature | useRef (Functional) | useState | createRef (Class) |
|---|---|---|---|
|
Persists across renders |
Yes |
Yes |
Yes |
|
Triggers re-render |
No |
Yes |
No |
|
Use in functional components |
Yes |
Yes |
No (class only) |
|
DOM access |
Yes |
No |
Yes |
|
Typical use case |
DOM access, mutable data |
UI state |
DOM access in class components |
When to Use Each
useRef is the best choice for functional components. It’s simple, efficient, and flexible.
React useRef isn’t just for DOM access, it’s a Swiss Army knife for advanced patterns. Let’s explore some real-world applications.
You can use useRef to store previous state or props:
import { useState, useRef, useEffect } from ‘react’;
function PreviousValue() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count; // Store previous count
}, [count]);
const handleIncrement = () => setCount(count + 1);
return (
<div>
<p>Current: {count}</p>
<p>Previous: {prevCountRef.current}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
}
prevCountRef.current keeps the old count value. It helps you compare changes without re-rendering.Use useRef to handle timers or animation frames. Store the timer ID in a ref so you can clean it up easily.
import { useRef, useEffect } from ‘react’;
function Timer() {
const timerRef = useRef(null);
useEffect(() => {
timerRef.current = setInterval(() => {
console.log(‘Tick’);
}, 1000);
return () => clearInterval(timerRef.current); // Cleanup
}, []);
return <div>Timer running…</div>;
}
Some libraries (like Chart.js or GSAP) need to use DOM elements. React’s useRef helps with this.
import { useRef, useEffect } from ‘react’;
import Chart from ‘chart.js/auto’;
function ChartComponent() {
const canvasRef = useRef(null);
useEffect(() => {
const ctx = canvasRef.current.getContext(‘2d’);
new Chart(ctx, {
type: ‘bar’,
data: {
labels: [‘Red’, ‘Blue’, ‘Yellow’],
datasets: [{ data: [12, 19, 3] }],
},
});
}, []);
return <canvas ref={canvasRef} />;
}
If you use TypeScript, you can add type safety:
import { useRef, useEffect } from ‘react’;
function TypedComponent() {
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return <input ref={inputRef} type=”text” />;
}
Using HTMLInputElement tells TypeScript what inputRef.current is. This stops errors.
The useRef hook in React is a practical and performance-conscious tool for managing mutable values and DOM references without triggering re-renders. It’s essential when working with tasks like focusing an input, measuring element dimensions, or setting up timers and third-party libraries.
Key takeaways:
With useRef, you get better control over side effects, UI behavior, and performance. Try the code examples in this guide to see how useRef can simplify your work.
© 2024 xlearnerdev. All rights reserved