What are the main use cases for useRef?

Question

Accepted Answer

`useRef` returns a mutable container `{ current: ... }` that **persists across renders** but, crucially, **changing it does NOT trigger a re-render**. Two distinct uses:

## 1. Access a DOM node

```jsx
function SearchBox() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // imperatively focus the input on mount
  }, []);
  return <input ref={inputRef} />;
}
```

## 2. Hold a mutable value between renders

Use it to remember something without causing renders — timer ids, the previous value of a prop, an instance of a library:

```jsx
function Timer() {
  const intervalId = useRef(null);
  const start = () => {
    intervalId.current = setInterval(tick, 1000); // store across renders
  };
  const stop = () => clearInterval(intervalId.current);
}
```

## The key distinction: ref vs state

```jsx
const countRef = useRef(0);
countRef.current++;  // changes the value, but the UI does NOT update

const [count, setCount] = useState(0);
setCount(count + 1); // changes value AND re-renders
```

So the rule is: **if the UI should reflect the value, use state; if it's just "behind the scenes" data, use a ref.** Reading/writing `ref.current` during render is discouraged (do it in effects/handlers) because refs aren't tracked by React's render cycle.