useRef is a React Hook that lets you create a “reference” to a value or a DOM element, which persists across renders but does NOT cause the component to re-render when it changes.
Think of it as a special box you can store something in, and React will not look inside unless you ask for it directly.
How useRef Works
When you call useRef(initialValue), React gives you back an object:
jsconst myRef = useRef(initialValue);
This object always has a .current property:
- At first, .current is set to your initialValue.
- You can read or write to .current at any time.
- Changing .current does NOT trigger a re-render.
Main Uses of useRef
useRef isn’t just for grabbing DOM nodes it also helps persist values, track previous state, and manage mutable data without re-renders.
Accessing DOM Elements Directly
- You can attach a ref to a DOM element to interact with it, just like using document.querySelector in plain JavaScript.
- Example: Focusing on an input field when a component mounts:
import { useRef, useEffect } from "react";function Login() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus(); // Focuses the input on mount
}, []);
return <input ref={inputRef} />;
}
- Here, inputRef.current points to the actual input DOM node.
Persisting Mutable Values Across Renders
- Sometimes, you want to keep a value between renders but don’t want it to cause a re-render if it changes (like a timer ID, or a render count).
- Example: Counting how many times a component rendered:
const renderCount = useRef(1);useEffect(() => {
renderCount.current += 1;
});
- renderCount.current updates, but the component doesn’t re-render because of it.
Also Read: ReactJS Integration Services: Seamless Solutions for Modern Applications
Tracking Previous State or Props
- You can use useRef to remember the previous value of a prop or state variable.
- Example: Storing the previous value of an input:
const [value, setValue] = useState("");const prevValue = useRef("");
useEffect(() => {
prevValue.current = value;
}, [value]);
Now, prevValue.current always holds the previous value for comparison or undo logic
Key Characteristics and Caveats
- Does not re-render: Changing .current won’t update your UI.
- Same object every render: The ref object returned by useRef is stable and does not change between renders.
- Not for state: Don’t use refs for data that should trigger a UI update, use useState for that.
- Don’t read/write during render: Only initialize or attach refs in the render phase; update them in effects or event handlers.
Visual Example
import { useRef } from "react";
function Example() {
const inputRef = useRef(null);
function handleClick() {
inputRef.current.focus(); // Focuses the input when button is clicked
}
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>Focus the input</button>
</>
);
}
Conclusion
useRef is a great tool for persisting values and accessing DOM elements in React, without causing unwanted re-renders. Use it for things like focusing inputs, storing timers, or tracking previous values anywhere you need a persistent, mutable value that doesn’t affect the UI directly
