useRef Ref Hook
Last updated: 2026-11-02
useRef Ref Hook
useRef returns a container with a current property: it keeps any value alive across renders, and writing to it never triggers a re-render. The most common use is to get hold of a DOM node for focusing, measuring or scrolling; the second is to store mutable data such as a timer id that plays no part in the render output. Because the container never causes a render, it is the right place for values that matter to the process but not to the screen.
| Group | Effects & Performance |
|---|---|
| Kind | Hook |
| Since | React 16.8 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
const ref = useRef(initialValue)
ref.current // read
ref.current = ... // write: legal, but it does not trigger a render
<input ref={ref} /> // after it is mounted, ref.current is the node itself⚙️ Parameters
| initialValue | The initial value of current; it only takes effect on the first render, and changing the argument later does not reassign it. |
|---|
Returns：Returns a stable { current: initialValue } object: it is the very same reference for the whole lifetime of the component.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Clicking "Focus" jumps the caret into the input; clicking "Clear and focus" empties the field and puts the caret back — DOM work that state simply cannot do.💡 Key Points
🏷️ More Effects & Performance
💡 Related Cases
📚 Related Tutorials
❓ FAQ
