Tất tần tật về Hook useId() trong React

Nếu bạn đã lập trình với React một thời gian, chắc hẳn bạn đã quen với các hook như useState, useEffect, hoặc useRef. Nhưng có một hook ít người biết đến lại âm thầm làm rất nhiều việc — giống như phím Ctrl bên phải trên bàn phím mà ít ai sử dụng: useId().

Trong bài viết này, chúng ta sẽ khám phá useId() thực sự làm gì, khi nào nên sử dụng nó, và cách nó có thể giúp cải thiện cấu trúc cũng như khả năng truy cập (accessibility) của các component.

useId() là gì?

Được giới thiệu trong React 18, useId() là một hook tích hợp sẵn giúp tạo ra các ID duy nhất và ổn định cho component của bạn.

Nó đặc biệt hữu ích trong các trường hợp như:

• Liên kết thẻ <label> với <input>
• Thuộc tính ARIA phục vụ khả năng truy cập
• Tránh trùng ID trong các cấu trúc giao diện động

Khác với việc tự tạo ID bằng Math.random() hay Date.now(), useId() đảm bảo ID ổn định qua các lần render và duy nhất trên toàn bộ ứng dụng — cả phía client và server.

Tại sao bạn nên quan tâm?

Trước React 18, lập trình viên thường phải tự tạo giải pháp để sinh ID duy nhất. Giờ đây với useId(), mọi việc trở nên đơn giản — và an toàn hơn.

Lợi ích của useId():

• Tránh trùng ID: Việc hardcode ID dễ gây trùng lặp. useId() tự động đảm bảo tính duy nhất.
• Ổn định giữa SSR và CSR: Đảm bảo ID giống nhau dù render ở phía server hay client.
• Tăng cường Accessibility: Lý tưởng cho ARIA labels và liên kết các phần tử theo cách thân thiện với trình đọc màn hình.

Cách sử dụng useId() trong React

Ví dụ cơ bản:

import { useId } from 'react';

function CustomInput() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Enter your name:</label>
      <input id={id} type="text" placeholder="John Doe" />
    </div>
  );
}

export default CustomInput;

Ở đây, useId() tạo ra một ID nhất quán để liên kết giữa <label> và <input>.

Cần nhiều hơn một ID?

Đôi khi bạn cần nhiều ID duy nhất trong một component — không vấn đề gì:

import { useId } from 'react';

function CustomForm() {
  const nameId = useId();
  const emailId = useId();

  return (
    <form>
      <div>
        <label htmlFor={nameId}>Name:</label>
        <input id={nameId} type="text" placeholder="John Doe" />
      </div>
      <div>
        <label htmlFor={emailId}>Email:</label>
        <input id={emailId} type="email" placeholder="john@example.com" />
      </div>
    </form>
  );
}

export default CustomForm;

Mỗi lần gọi useId() sẽ tạo ra một ID duy nhất — cực kỳ hữu ích khi xây dựng form tái sử dụng hoặc giao diện động.

Tăng cường Accessibility với useId()

Accessibility (a11y) là một phần thiết yếu của phát triển web hiện đại. Với useId(), bạn dễ dàng quản lý các thuộc tính ARIA và mối liên hệ giữa các phần tử.

Ví dụ, phần tiêu đề có thể được liên kết rõ ràng với vùng cảnh báo, giúp trình đọc màn hình hiểu rõ hơn nội dung hiển thị.

Khi nào KHÔNG nên dùng useId()?

Mặc dù useId() rất mạnh, nhưng không phải lúc nào cũng phù hợp. Một số trường hợp bạn nên tránh dùng:

• Key trong danh sách: Đừng dùng useId() làm key trong danh sách — hãy dùng dữ liệu duy nhất từ item thay thế.
• ID từ người dùng hoặc database: Nếu ID đến từ API hoặc cơ sở dữ liệu, bạn không cần useId().
• ID thay đổi theo render: Nếu ID cần thay đổi mỗi lần render (ví dụ cho animation), hãy dùng useRef() hoặc state.

Tổng kết

useId() là một bổ sung đơn giản nhưng mạnh mẽ trong gia đình React Hooks. Nó giúp component dễ truy cập hơn, tránh lỗi trùng ID, và hoạt động tốt với render phía server.

Hãy bắt đầu sử dụng useId() đúng lúc — đặc biệt trong các form và tính năng liên quan đến accessibility — để viết component sạch hơn, bền vững hơn.

Cảm ơn các bạn đã theo dõi!