Hook useId của React: Phân Tích Sâu về Việc Tạo Định Danh Ổn Định và Duy Nhất

Trong bối cảnh phát triển web không ngừng thay đổi, việc đảm bảo tính nhất quán giữa nội dung được render phía server và ứng dụng phía client là tối quan trọng. Một trong những thách thức dai dẳng và tinh vi nhất mà các nhà phát triển phải đối mặt là việc tạo ra các định danh (identifier) duy nhất và ổn định. Các ID này rất quan trọng để kết nối nhãn (label) với các ô nhập liệu (input), quản lý các thuộc tính ARIA cho khả năng truy cập, và một loạt các tác vụ liên quan đến DOM khác. Trong nhiều năm, các nhà phát triển đã phải dùng đến các giải pháp không lý tưởng, thường dẫn đến lỗi không khớp khi hydration và các bug gây khó chịu. Hãy đến với hook `useId` của React 18—một giải pháp đơn giản nhưng mạnh mẽ được thiết kế để giải quyết vấn đề này một cách thanh lịch và dứt khoát.

Hướng dẫn toàn diện này dành cho các nhà phát triển React toàn cầu. Dù bạn đang xây dựng một ứng dụng chỉ render phía client đơn giản, một trải nghiệm render phía server (SSR) phức tạp với một framework như Next.js, hay tạo ra một thư viện component cho cả thế giới sử dụng, việc hiểu `useId` không còn là một lựa chọn. Nó là một công cụ cơ bản để xây dựng các ứng dụng React hiện đại, mạnh mẽ và dễ truy cập.

Vấn đề trước khi có `useId`: Một thế giới của lỗi không khớp Hydration

Để thực sự đánh giá cao `useId`, trước tiên chúng ta phải hiểu thế giới khi không có nó. Vấn đề cốt lõi luôn là nhu cầu về một ID vừa duy nhất trong trang được render mà cũng phải nhất quán giữa server và client.

Hãy xem xét một component input đơn giản có nhãn:

function LabeledInput({ label, ...props }) {
  // Làm thế nào để tạo một ID duy nhất ở đây?
  const inputId = 'some-unique-id';

  return (
    

      {label}
      
    
  );
}

Thuộc tính `htmlFor` trên `` cần phải khớp với `id` của `` để đảm bảo HTML có ngữ nghĩa và khả năng truy cập. Nếu chúng ta sử dụng component `LabeledInput` này nhiều lần trên một trang, chúng ta cần một ID khác nhau cho mỗi phiên bản.

Cách 1: Sử dụng `Math.random()`

Một ý tưởng đầu tiên phổ biến để tạo ID duy nhất là sử dụng tính ngẫu nhiên.

// ANTI-PATTERN: Đừng làm điều này!
const inputId = `input-${Math.random()}`;

Tại sao cách này thất bại:

• Không khớp SSR: Server sẽ tạo ra một số ngẫu nhiên (ví dụ: `input-0.12345`). Khi client thực hiện hydration ứng dụng, nó sẽ chạy lại JavaScript và tạo ra một số ngẫu nhiên khác (ví dụ: `input-0.67890`). React sẽ thấy sự khác biệt này giữa HTML từ server và HTML được render phía client và ném ra một lỗi hydration.
• Render lại: ID này sẽ thay đổi mỗi khi component được render lại, điều này có thể dẫn đến hành vi không mong muốn và các vấn đề về hiệu suất.

Cách 2: Sử dụng một bộ đếm toàn cục

Một cách tiếp cận tinh vi hơn một chút là sử dụng một bộ đếm tăng dần đơn giản.

// ANTI-PATTERN: Cũng có vấn đề
let globalCounter = 0;
function generateId() {
  globalCounter++;
  return `component-${globalCounter}`;
}

Tại sao cách này thất bại:

• Phụ thuộc vào thứ tự SSR: Cách này có vẻ hoạt động lúc đầu. Server render các component theo một thứ tự nhất định, và client thực hiện hydration chúng. Tuy nhiên, điều gì sẽ xảy ra nếu thứ tự render component hơi khác nhau giữa server và client? Điều này có thể xảy ra với code splitting hoặc streaming không theo thứ tự. Nếu một component được render trên server nhưng bị trì hoãn trên client, chuỗi ID được tạo ra có thể bị mất đồng bộ, một lần nữa dẫn đến lỗi không khớp hydration.
• Địa ngục thư viện component: Nếu bạn là tác giả thư viện, bạn không có quyền kiểm soát có bao nhiêu component khác trên trang cũng có thể đang sử dụng bộ đếm toàn cục của riêng họ. Điều này có thể dẫn đến xung đột ID giữa thư viện của bạn và ứng dụng chủ.

Những thách thức này đã nhấn mạnh sự cần thiết của một giải pháp gốc React, có tính xác định và hiểu được cấu trúc của cây component. Đó chính xác là những gì `useId` cung cấp.

Giới thiệu `useId`: Giải pháp chính thức

Hook `useId` tạo ra một chuỗi ID duy nhất, ổn định trên cả các lần render ở server và client. Nó được thiết kế để được gọi ở cấp cao nhất của component để tạo ra các ID để truyền cho các thuộc tính trợ năng.

Cú pháp và cách sử dụng cơ bản

Cú pháp vô cùng đơn giản. Nó không nhận tham số và trả về một chuỗi ID.

import { useId } from 'react';

function LabeledInput({ label, ...props }) {
  // useId() tạo ra một ID duy nhất, ổn định như ":r0:"
  const id = useId();

  return (
    

      {label}
      
    
  );
}

// Ví dụ sử dụng
function App() {
  return (
    

      
Biểu mẫu đăng ký
      
      
    
  );
}

Trong ví dụ này, `LabeledInput` đầu tiên có thể nhận được một ID như `":r0:"`, và cái thứ hai có thể nhận được `":r1:"`. Định dạng chính xác của ID là một chi tiết triển khai của React và không nên dựa vào nó. Đảm bảo duy nhất là nó sẽ là duy nhất và ổn định.

Điểm mấu chốt là React đảm bảo cùng một chuỗi ID được tạo ra trên server và client, loại bỏ hoàn toàn các lỗi hydration liên quan đến các ID được tạo ra.

Nó hoạt động như thế nào về mặt khái niệm?

Sự kỳ diệu của `useId` nằm ở tính xác định của nó. Nó không sử dụng tính ngẫu nhiên. Thay vào đó, nó tạo ra ID dựa trên đường dẫn của component trong cây component của React. Vì cấu trúc cây component là giống nhau trên server và client, các ID được tạo ra được đảm bảo khớp nhau. Cách tiếp cận này có khả năng chống lại thứ tự render của component, vốn là điểm yếu của phương pháp bộ đếm toàn cục.

Tạo nhiều ID liên quan từ một lần gọi Hook

Một yêu cầu phổ biến là tạo ra một số ID liên quan trong cùng một component. Ví dụ, một input có thể cần một ID cho chính nó và một ID khác cho một phần tử mô tả được liên kết qua `aria-describedby`.

Bạn có thể muốn gọi `useId` nhiều lần:

// Không phải là mẫu được khuyến nghị
const inputId = useId();
const descriptionId = useId();

Mặc dù cách này hoạt động, mẫu được khuyến nghị là gọi `useId` một lần cho mỗi component và sử dụng ID cơ sở trả về làm tiền tố cho bất kỳ ID nào khác bạn cần.

import { useId } from 'react';

function FormFieldWithDescription({ label, description }) {
  const baseId = useId();
  const inputId = `${baseId}-input`;
  const descriptionId = `${baseId}-description`;

  return (
    

      {label}
      
      

        {description}
      
    
  );
}

Tại sao mẫu này tốt hơn?

• Hiệu quả: Nó đảm bảo rằng chỉ có một ID duy nhất cần được tạo và theo dõi bởi React cho phiên bản component này.
• Rõ ràng và ngữ nghĩa: Nó làm rõ mối quan hệ giữa các phần tử. Bất kỳ ai đọc mã đều có thể thấy rằng `form-field-:r2:-input` và `form-field-:r2:-description` thuộc về nhau.
• Đảm bảo tính duy nhất: Vì `baseId` được đảm bảo là duy nhất trên toàn ứng dụng, bất kỳ chuỗi nào có hậu tố cũng sẽ là duy nhất.

Tính năng Sát thủ: Render phía Server (SSR) hoàn hảo

Hãy xem lại vấn đề cốt lõi mà `useId` được xây dựng để giải quyết: lỗi không khớp hydration trong các môi trường SSR như Next.js, Remix, hoặc Gatsby.

Kịch bản: Lỗi không khớp Hydration

Hãy tưởng tượng một component sử dụng cách tiếp cận `Math.random()` cũ của chúng ta trong một ứng dụng Next.js.

1. Render phía Server: Server chạy mã component. `Math.random()` tạo ra `0.5`. Server gửi HTML đến trình duyệt với ``.
2. Render phía Client (Hydration): Trình duyệt nhận HTML và gói JavaScript. React khởi động trên client và render lại component để gắn các trình xử lý sự kiện (quá trình này được gọi là hydration). Trong quá trình render này, `Math.random()` tạo ra `0.9`. React tạo ra một DOM ảo với ``.
3. Sự không khớp: React so sánh HTML do server tạo ra (`id="input-0.5"`) với DOM ảo do client tạo ra (`id="input-0.9"`). Nó thấy một sự khác biệt và đưa ra một cảnh báo: "Warning: Prop `id` did not match. Server: "input-0.5" Client: "input-0.9"".

Đây không chỉ là một cảnh báo hình thức. Nó có thể dẫn đến giao diện người dùng bị hỏng, xử lý sự kiện không chính xác và trải nghiệm người dùng kém. React có thể phải loại bỏ HTML được render phía server và thực hiện một lần render đầy đủ phía client, làm mất đi lợi ích về hiệu suất của SSR.

Kịch bản: Giải pháp `useId`

Bây giờ, hãy xem `useId` khắc phục điều này như thế nào.

1. Render phía Server: Server render component. `useId` được gọi. Dựa trên vị trí của component trong cây, nó tạo ra một ID ổn định, giả sử là `":r5:"`. Server gửi HTML với ``.
2. Render phía Client (Hydration): Trình duyệt nhận HTML và JavaScript. React bắt đầu quá trình hydration. Nó render cùng một component ở cùng một vị trí trong cây. Hook `useId` chạy lại. Vì kết quả của nó là xác định dựa trên cấu trúc cây, nó tạo ra chính xác cùng một ID: `":r5:"`.
3. Khớp hoàn hảo: React so sánh HTML do server tạo ra (`id=":r5:"`) với DOM ảo do client tạo ra (`id=":r5:"`). Chúng khớp hoàn hảo. Quá trình hydration hoàn tất thành công mà không có lỗi nào.

Sự ổn định này là nền tảng cho giá trị của `useId`. Nó mang lại sự tin cậy và khả năng dự đoán cho một quy trình trước đây rất mong manh.

Siêu năng lực về Khả năng truy cập (a11y) với `useId`

Mặc dù `useId` rất quan trọng đối với SSR, công dụng hàng ngày chính của nó là cải thiện khả năng truy cập. Việc liên kết chính xác các phần tử là nền tảng cho người dùng các công nghệ hỗ trợ như trình đọc màn hình.

`useId` là công cụ hoàn hảo để kết nối các thuộc tính ARIA (Accessible Rich Internet Applications) khác nhau.

Ví dụ: Hộp thoại Modal dễ truy cập

Một hộp thoại modal cần liên kết vùng chứa chính của nó với tiêu đề và mô tả để các trình đọc màn hình có thể thông báo chúng một cách chính xác.

import { useId, useState } from 'react';

function AccessibleModal({ title, children }) {
  const id = useId();
  const titleId = `${id}-title`;
  const contentId = `${id}-content`;

  return (
    

      
{title}
      

        {children}
      
    
  );
}

function App() {
  return (
    
      
Bằng cách sử dụng dịch vụ này, bạn đồng ý với các điều khoản và điều kiện của chúng tôi...
    
  );
}

Ở đây, `useId` đảm bảo rằng dù `AccessibleModal` này được sử dụng ở đâu, các thuộc tính `aria-labelledby` và `aria-describedby` sẽ trỏ đến các ID chính xác và duy nhất của các phần tử tiêu đề và nội dung. Điều này cung cấp một trải nghiệm liền mạch cho người dùng trình đọc màn hình.

Ví dụ: Kết nối các nút Radio trong một nhóm

Các điều khiển biểu mẫu phức tạp thường cần quản lý ID cẩn thận. Một nhóm các nút radio nên được liên kết với một nhãn chung.

import { useId } from 'react';

function RadioGroup() {
  const id = useId();
  const headingId = `${id}-heading`;

  return (
    

      
Chọn tùy chọn giao hàng toàn cầu của bạn:
      

        
        Tiêu chuẩn (5-10 ngày làm việc)
      
      

        
        Nhanh (2-3 ngày làm việc)
      
    
  );
}

Bằng cách sử dụng một lần gọi `useId` duy nhất làm tiền tố, chúng ta tạo ra một bộ điều khiển gắn kết, dễ truy cập và duy nhất hoạt động đáng tin cậy ở mọi nơi.

Những điểm khác biệt quan trọng: `useId` KHÔNG dùng để làm gì

Quyền lực lớn đi kèm với trách nhiệm lớn. Việc hiểu nơi không nên sử dụng `useId` cũng quan trọng không kém.

KHÔNG sử dụng `useId` cho các Keys của danh sách

Đây là sai lầm phổ biến nhất mà các nhà phát triển mắc phải. Các key của React cần phải là các định danh ổn định và duy nhất cho một mẩu dữ liệu cụ thể, chứ không phải một phiên bản component.

CÁCH SỬ DỤNG KHÔNG ĐÚNG:

function TodoList({ todos }) {
  // ANTI-PATTERN: Không bao giờ sử dụng useId cho keys!
  return (
    

      {todos.map(todo => {
        const key = useId(); // Điều này là sai!
        return 
{todo.text}
;
      })}
    
  );
}

Đoạn mã này vi phạm Quy tắc của Hooks (bạn không thể gọi một hook bên trong một vòng lặp). Nhưng ngay cả khi bạn cấu trúc nó khác đi, logic vẫn sai. `key` phải được gắn với chính mục `todo`, như `todo.id`. Điều này cho phép React theo dõi chính xác các mục khi chúng được thêm, xóa hoặc sắp xếp lại.

Sử dụng `useId` cho một key sẽ tạo ra một ID gắn với vị trí render (ví dụ: `

function TodoList({ todos }) {
  return (
    

      {todos.map(todo => (
        // Đúng: Sử dụng một ID từ dữ liệu của bạn.
        
{todo.text}
      ))}
    
  );
}