useId — unique ID yaratish, accessibility uchun

~10 daq · React · Hooks — Ilg'or

Muammo: bir xil ID bir sahifada ikki marta

HTML da <label> va <input> ni bog'lash uchun htmlFor va id ishlatiladi. Foydalanuvchi labelga bossа — input ga focus tushadi. Bu accessibility uchun muhim.

function EmailInput() {
  return (
    <div>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" />
    </div>
  );
}

Lekin bu komponent sahifada ikki marta ishlatilsa — ikki xil element bir xil id="email" ga ega bo'ladi. HTML da ID unikal bo'lishi kerak. Bu xato.

// ❌ Muammo — ikki xil input, bir xil id
<EmailInput />  // id="email"
<EmailInput />  // id="email" — takrorlandi!

Birinchi labelga bossangiz — qaysi inputga focus tushishini bilmaysiz.

useId yechimi

useId — har safar chaqirilganda unikal ID qaytaradi. Bir komponent sahifada necha marta ishlatilmasin — har biri o'z unikal ID sini oladi.

import { useId } from 'react';

function EmailInput() {
  const id = useId(); // ":r0:", ":r1:", ":r2:" — har safar boshqacha

  return (
    <div>
      <label htmlFor={id}>Email</label>
      <input id={id} type="email" />
    </div>
  );
}

// ✅ Endi har biri o'z unikal ID siga ega
<EmailInput />  // id=":r0:"
<EmailInput />  // id=":r1:"
<EmailInput />  // id=":r2:"

Bir komponentda bir nechta ID

Bir komponentda bir nechta element bog'lash kerak bo'lsa — bitta useId dan prefix sifatida foydalaniladi:

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

  return (
    <form>
      <div>
        <label htmlFor={`${id}-ism`}>Ism</label>
        <input id={`${id}-ism`} type="text" />
      </div>

      <div>
        <label htmlFor={`${id}-email`}>Email</label>
        <input id={`${id}-email`} type="email" />
      </div>

      <div>
        <label htmlFor={`${id}-parol`}>Parol</label>
        <input id={`${id}-parol`} type="password" />
      </div>
    </form>
  );
}

Bitta useId — uchta unikal ID. Har safar useId chaqirish o'rniga — bitta ID dan prefix yasash yaxshiroq.

Qachon kerak emas?

useId faqat HTML elementlarni bog'lash uchun. Ro'yxat uchun key sifatida ishlatmang:

// ❌ Xato — useId ro'yxat uchun emas
{items.map(item => {
  const id = useId(); // Hook loop ichida ishlatilmaydi!
  return <li key={id}>{item}</li>;
})}

// ✅ Ro'yxat uchun — ma'lumotdagi id
{items.map(item => <li key={item.id}>{item.nomi}</li>)}

⚠️ Hook lar loop, shart yoki ichki funksiya ichida chaqirilmaydi — bu React ning asosiy qoidasi.

Xulosa

useId — accessibility uchun unikal ID yaratadi. label va input ni bog'lashda, aria-* atributlarida ishlatiladi.

const id = useId();
// ":r0:", ":r1:" — har komponent uchun unikal

<label htmlFor={id}>...</label>
<input id={id} />

Kichik hook, lekin accessibility uchun muhim.

Keyingi dars

24-dars: Custom Hook — nima, qanday yoziladi, qoidalar