What is useRef and when should you use it?

Updated Apr 23, 2026

Short answer

In React, `useRef` is a hook that returns a mutable object that persists across renders without causing a re-render when updated.

You should use useRef when you need to:

Access DOM elements directly
Store values that don’t affect rendering (like timers, previous values, or flags)

useRef returns an object like this:

TypeScript

const ref = { current: initialValue }

This object:

---

TypeScript

import { useRef } from "react";function Example() {  const inputRef = useRef(null);  return <input ref={inputRef} />;}

---

One of the most common uses is directly accessing DOM nodes.

Unlock with a Pro subscription to view this section.

No real-world example available yet.

Unlock with a Pro subscription to view this section.

No common mistakes listed yet.

Unlock with a Pro subscription to view this section.

No follow-up questions available yet.

Unlock with a Pro subscription to view this section.