Suggest an edit

Improve this article

Refine the answer for “In-depth questions on useRef”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. What does `useRef()` return

The `useRef()` hook returns a **reference object** with a single property, `.current`.

```javascript
const myRef = useRef(initialValue);
```

The returned value:

```javascript
{ current: initialValue }
```

- `current` is the current value of the reference (it can be changed).
- This object is **the same one** across all of the component's renders.

---

## Example:

```javascript
const ref = useRef(10);
console.log(ref.current); // 10
ref.current = 25;
console.log(ref.current); // 25
```

React **does not lose this value across re-renders** - the `ref` lives through the component's whole lifecycle.

---

## 2. When is `useRef()` useful

### Main use cases:

| Scenario | Example |
|---|---|
| Access to a DOM element | `inputRef.current.focus()` |
| Storing a timer or an id | `setInterval`, `requestAnimationFrame` |
| Keeping the previous value | `prevValue.current = value` |
| Storing "mutable" data without a re-render | a counter, cache, local buffer |
| Avoiding "stale closures" in effects | keeping an up-to-date reference to a variable |

---

### Example - focusing an input:

```javascript
import { useRef, useEffect } from "react";

function InputFocus() {
  const inputRef = useRef(null);

useEffect(() => {
    inputRef.current.focus(); // access to the DOM element
  }, []);

return <input ref={inputRef} placeholder="Focus on me" />;
}
```

---

## 3. How does `useRef()` differ from `useState()`

| Characteristic | `useState()` | `useRef()` |
|---|---|---|
| Stores data across renders | Yes | Yes |
| Triggers a re-render on change | Yes | No |
| Stores a DOM reference | No | Yes |
| Suits UI state | Yes | No |
| Suits "internal" mutable data | Sometimes | Excellent |

---

### Example of the difference:

```javascript
function Example() {
  const [count, setCount] = useState(0);
  const refCount = useRef(0);

const handleClick = () => {
    setCount(count + 1);     // triggers a render
    refCount.current += 1;   // does not trigger a render
    console.log("refCount =", refCount.current);
  };

console.log("Component re-rendered");

return <button onClick={handleClick}>Count: {count}</button>;
}
```

On each click:

- `setCount()` -> updates the UI (re-render)
- `refCount.current++` -> just changes the value in memory, no re-render

---

## 4. Can `.current` be changed without a re-render?

Yes, that is exactly what `useRef` **was created for.**

```javascript
ref.current = newValue; // can be changed directly
```

React **does not track** changes to `.current`,
so changing it does not trigger a re-render of the component.

This behavior makes `useRef` ideal for:

- counters, timers, caches, buffers;
- flags like `isMounted`;
- storing any mutable value that does not affect the UI.

---

## Summary

| Question | Short answer |
|---|---|
| What does `useRef()` return | The object `{ current: initialValue }` |
| When is it useful | For DOM access, storing mutable data, previous values, timers |
| How does it differ from `useState()` | `useState` triggers a re-render on change, `useRef` does not |
| Can `.current` be changed without a render | Yes, `.current` can be changed directly, React will not re-render the component |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts506 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.