useRef Hook in React
useRef Hook in React – Complete Beginner Guide (2026)
The useRef hook in React is used to create references to DOM elements and store values that do not cause re-rendering. It is useful for accessing elements directly and managing mutable data in functional components. Understanding useRef is important for handling focus, animations, and performance optimizations in React applications.
What is useRef Hook in React
React useRef is a hook that returns a mutable object with a .current property. This object persists across renders and can store values or reference DOM elements.
Syntax of useRef Hook
The ref object contains a current property where the value is stored.
Basic Example of useRef
function InputFocus() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type=“text” />
<button onClick={handleClick}>Focus Input</button>
</div>
);
}
In this example, clicking the button focuses the input field using useRef.
How useRef Works
useRef stores a value that persists across renders without triggering a re-render. It is mainly used for accessing DOM elements and storing mutable values.
Key Use Cases of useRef
Accessing DOM elements directly
Managing focus, text selection, or media playback
Storing previous values
Avoiding unnecessary re-renders
useRef vs useState
useRef does not trigger re-render when value changes
useState triggers re-render when state updates
useRef is used for mutable values
useState is used for UI updates
Best Practices for useRef
Use useRef for DOM manipulation
Avoid overusing it for state management
Use meaningful names for refs
Keep logic clean and simple
Internal Linking Strategy
Click here for free courses
FAQs
What is useRef in React
useRef is a hook used to store references and mutable values.
Does useRef cause re-render
No, it does not trigger re-render when value changes.
When should we use useRef
It is used for accessing DOM elements and storing values without re-rendering.
What is .current in useRef
It is a property that holds the reference value.