`useId` sinh ra để làm gì? Vì sao không tự sinh id bằng `Math.random()` hay biến đếm toàn cục?

useId tạo một chuỗi id duy nhất và ổn định để nối <label htmlFor> với <input id>, hoặc để gắn aria-describedby, aria-labelledby.

function PasswordField() {
  const id = useId()
  return (
    <>
      <label htmlFor={id}>Password</label>
      <input id={id} type="password" aria-describedby={id + '-hint'} />
      <p id={id + '-hint'}>At least 8 characters</p>
    </>
  )
}

Vì sao không tự sinh:

• Math.random() cho giá trị khác nhau giữa server và client → hydration mismatch, React cảnh báo và phải render lại phần đó.
• Biến đếm toàn cục phụ thuộc thứ tự component được render, mà thứ tự này khác nhau giữa SSR và client (streaming, Suspense) nên cũng lệch.
• useId được React sinh theo vị trí trong cây component, nên server và client ra cùng kết quả.

Lưu ý: useId không dùng để làm key cho danh sách — key phải đến từ dữ liệu (id trong database).