Các trường hợp dùng chính của useRef là gì?

Question

Accepted Answer

`useRef` trả về một container có thể thay đổi `{ current: ... }` **tồn tại qua các lần render** nhưng, quan trọng, **thay đổi nó KHÔNG kích hoạt render lại**. Hai cách dùng riêng biệt:

## 1. Truy cập một nút DOM

```jsx
function SearchBox() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // focus input một cách mệnh lệnh khi mount
  }, []);
  return <input ref={inputRef} />;
}
```

## 2. Giữ một giá trị có thể thay đổi giữa các lần render

Dùng nó để nhớ gì đó mà không gây render — id timer, giá trị trước của một prop, một instance của thư viện:

```jsx
function Timer() {
  const intervalId = useRef(null);
  const start = () => {
    intervalId.current = setInterval(tick, 1000); // lưu qua các lần render
  };
  const stop = () => clearInterval(intervalId.current);
}
```

## Điểm phân biệt then chốt: ref vs state

```jsx
const countRef = useRef(0);
countRef.current++;  // thay đổi giá trị, nhưng UI KHÔNG cập nhật

const [count, setCount] = useState(0);
setCount(count + 1); // thay đổi giá trị VÀ render lại
```

Nên quy tắc là: **nếu UI cần phản ánh giá trị, dùng state; nếu chỉ là dữ liệu "hậu trường", dùng ref.** Đọc/ghi `ref.current` trong lúc render bị khuyến cáo không nên (hãy làm trong effect/handler) vì ref không được theo dõi bởi chu trình render của React.