useRef: Thao Tác DOM & Giữ Giá Trị Mutable Không Re-render

Phân biệt khi nào cần useState vs useRef, cách truy cập phần tử DOM trực tiếp, lưu trữ Timer ID và cú pháp ref trong React.

Core Mental Model

useRef giống như một 'chiếc hộp' bí mật giữ một giá trị JavaScript thuần túy (`ref.current`). Thay đổi `ref.current` KHÔNG kích hoạt Component re-render.

Key Takeaways & Principles

Dùng useRef khi bạn cần lưu thông tin không ảnh hưởng trực tiếp đến hình ảnh hiển thị của UI (ví dụ: timer IDs, previous props, số lần render).

Dùng useRef gắn vào thẻ JSX để truy cập các hàm DOM của trình duyệt (ví dụ: `inputRef.current.focus()`, `videoRef.current.play()`).

Trong React, `ref` được truyền trực tiếp như một prop thông thường mà không bắt buộc phải bọc hàm `forwardRef()`.

React Hooks Mastery

intermediate

16 phút

#useRef

#DOM Access

#Mutable Values

#React Ref