🪝 Introduction to useRef
The useRef Hook is a React Hook that creates a mutable reference object whose value persists across component re-renders. Unlike useState, updating a ref does not trigger a component re-render, making it ideal for storing mutable values and interacting directly with DOM elements.
Important
🎯 Why Use useRef?
Some values need to persist between renders without affecting the UI. Similarly, React applications often need direct access to DOM elements for focusing inputs, controlling videos, or measuring element sizes.useRef provides a clean way to handle these scenarios.
- Access DOM elements directly.
- Store mutable values without re-rendering.
- Persist values across renders.
- Keep previous values or timer IDs.
⚙️ Syntax
Basic Syntax
const ref = useRef(initialValue);| Part | Description |
|---|---|
| initialValue | The initial value assigned to the ref. |
| ref.current | The mutable value stored inside the ref object. |
🔄 How useRef Works
💻 Step 1: Create a Ref
Creating a Ref
import { useRef } from "react";
function App() {
const inputRef = useRef(null);
}Calling useRef() creates a ref object whose current property initially contains the supplied value.
💻 Step 2: Attach the Ref
Attach to an Element
function App() {
const inputRef = useRef(null);
return <input ref={inputRef} />;
}The ref attribute connects the DOM element to the ref object, allowing React to store the element in inputRef.current.
💻 Step 3: Use the Ref
Focus an Input
import { useRef } from "react";
function App() {
const inputRef = useRef(null);
function focusInput() {
inputRef.current.focus();
}
return (
<>
<input ref={inputRef} />
<button onClick={focusInput}>Focus</button>
</>
);
}Calling methods on inputRef.current lets you interact with the DOM element directly.
📊 useState vs useRef
Updating state causes React to re-render the component so the UI stays in sync with the latest data.
Updating ref.current does not trigger a re-render, making it suitable for mutable values and DOM references.
📋 Ref Lifecycle
🌍 Common Use Cases
| Scenario | Purpose |
|---|---|
| Focus Input | Automatically focus form fields. |
| Store Timer ID | Keep interval or timeout identifiers. |
| Previous Value | Remember previous state values. |
| DOM Manipulation | Scroll, measure, or control elements. |
| Third-party Libraries | Access DOM nodes required by external APIs. |
🧩 Combining useRef with useEffect
A common pattern is combining useRef with useEffect to focus an element immediately after the component mounts.
Auto Focus Input
import { useEffect, useRef } from "react";
function App() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return <input ref={inputRef} />;
}⚠️ Common Mistakes
- Expecting changes to ref.current to re-render the UI.
- Using refs instead of state for UI data.
- Accessing current before the element is mounted.
- Overusing refs when props or state are sufficient.
Warning
✅ Best Practices
- Use refs primarily for DOM access.
- Store mutable values that should persist between renders.
- Keep component state in useState.
- Combine useRef with useEffect for DOM interactions after rendering.
- Avoid unnecessary direct DOM manipulation.
📚 Official Resource
Learn more about useRef in the official React documentation at React useRef Documentation.