Sử dụng React Refs và hook useRef

React sử dụng cách tiếp cận khai báo (declarative). Bạn cập nhật state, và React sẽ cập nhật UI. Điều này hoạt động tốt cho hầu hết các tác vụ.

Nhưng đôi khi bạn cần bước ra khỏi Virtual DOM. Bạn có thể cần tác động trực tiếp vào một phần tử HTML thực tế. Đây chính là lúc Refs và hook useRef phát huy tác dụng.

Ref là gì?

Một Ref là một con trỏ. Nó kết nối trực tiếp React với một nút DOM gốc (native DOM node).

Tại sao nên dùng useRef thay vì useState?

Việc cập nhật state sẽ kích hoạt quá trình re-render. Điều này có nghĩa là React sẽ vẽ lại component trên màn hình. Việc cập nhật Ref không kích hoạt re-render. Điều này khiến chúng trở nên hoàn hảo cho các giá trị thay đổi nhưng không cần hiển thị ngay lập tức lên UI.

Các trường hợp sử dụng phổ biến:

• Tự động focus vào một ô nhập liệu (input field). • Điều khiển các phần tử video hoặc audio (play/pause). • Đo chiều rộng hoặc chiều cao của một phần tử. • Lưu trữ các ID của timer cho intervals hoặc timeouts.

Cách sử dụng useRef:

  1. Import useRef từ React.
  2. Khởi tạo nó: const myRef = useRef(null).
  3. Gắn nó vào một phần tử: <input ref={myRef} />.
  4. Truy cập giá trị thông qua: myRef.current.

Ví dụ 1: Tự động focus vào một ô input

Khi người dùng vào một trang, bạn muốn con trỏ nằm sẵn trong hộp văn bản. Bạn sử dụng useEffect để gọi myRef.current.focus() sau khi component được mount.

Ví dụ 2: Đồng hồ bấm giờ (Stopwatch)

Nếu bạn lưu trữ một setInterval ID trong state, component sẽ re-render mỗi khi bộ đếm thời gian nhảy. Điều này sẽ làm chậm ứng dụng. Nếu bạn lưu ID trong một ref, component sẽ hoạt động nhanh hơn. Giá trị này vẫn được giữ an toàn qua các lần render mà không gây thêm công việc cho trình duyệt.

So sánh State và Ref:

• State: Kích hoạt re-render. Dùng cho dữ liệu hiển thị trên UI. Các cập nhật là bất đồng bộ (asynchronous). • Ref: Không kích hoạt re-render. Dùng để truy cập DOM và lưu trữ bộ nhớ. Các cập nhật là đồng bộ (synchronous).

Mẹo chuyên sâu (Pro Tips) dành cho Senior:

• Tránh lạm dụng. Chỉ sử dụng refs khi logic khai báo (declarative logic) không đáp ứng được. • Dọn dẹp bộ nhớ. Luôn xóa các intervals hoặc event listeners trong hàm cleanup của bạn. • Không ghi vào refs trong quá trình rendering. Chỉ cập nhật ref.current bên trong useEffect hoặc các trình xử lý sự kiện (event handlers). Điều này giúp ngăn chặn các side effects. • Sử dụng forwardRef. Nếu bạn muốn truyền một ref vào một component con tùy chỉnh, bạn phải bao bọc component con đó trong React.forwardRef.

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde