یکی از تغییراتی که در React 18 منتشر شده است مربوط به هوک useId می‌باشد که کار با idهای منحصربه‌فرد در کامپوننت‌ها را بسیار آسان‌تر می‌کند. در این مقاله سعی داریم تا بیشتر در مورد این هوک صحبت کنیم.

هوک useId چگونه کار می‌کند؟

وظیفه اصلی هوک useId ایجاد idهای منحصربه‌فرد برای استفاده در المنت‌های HTML است. مثلا یک id برای یک ورودی ایجاد کنیم و آن ورودی یک لیبیل با همان id داشته باشد. به عنوان مثال اگر یک کامپوننت EmailFormداشته باشیم می‌توانیم آن را به این شکل بنویسیم:

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

کدی که داریم کار می‌کند، اما اگر سعی کنیم این فرم را چند بار در یک صفحه نمایش دهیم چندین المنت ورودی با همان id ایمیل خواهیم داشت. بدیهی است که این یک مشکل محسوب می‌شود زیرا هر id در یک صفحه باید منحصربه‌فرد باشد. علاوه بر آن وقتی روی لیبیل‌هایی که داریم کلیک می‌کنیم به جای ورودی ایمیل مرتبط با آن لیبیل، روی اولین ورودی ایمیل در صفحه متمرکز می‌شود. برای رفع این مشکل می‌توانیم از هوک useId استفاده کنیم.

function EmailForm() {
  const id = useId()
  return (
    <>
      <label htmlFor={id}>Email</label>
      <input id={id} type="email" />
    </>
  )
}

هوک useId یک هوک ساده است که هیچ ورودی دریافت نمی‌کند و یک id منحصربه‌فرد برمی‌گرداند. این id برای هر کامپوننت منحصربه‌فرد است. یعنی این که می‌توانیم این فرم را هر چند بار که بخواهیم بدون نگرانی در مورد idهای تکراری در صفحه خود رندر کنیم.

idهای تولید شده توسط هوک useId شبیه به این خواهند بود: :r1:، :r2:و غیره.

دریافت المنت‌ها با querySelector

نکته‌ای که در مورد هوک useId وجود دارد این است که idهای تولید شده توسط آن، سلکتورهای نامعتبری برای استفاده از روش querySelectorبه حساب می‌آیند. این یک حرکت هدفمند است زیرا React تمایل ندارد برای انتخاب المنت‌ها از idها و چیزی مانند querySelector استفاده کنیم. در عوض باید هوک useRef را برای انجام این کار مورد استفاده قرار دهیم.

استفاده از idهای متعدد در یک کامپوننت

نکته مهم دیگری که در مورد هوک useId باید به آن توجه کنیم این است که  در هر کامپوننت فقط باید یک بار از آن استفاده کنیم. این موضوع باعث بهبود کارایی شده و همینطور نتیجه‌ای که می‌خواهیم را هم به ما می‌دهد.

function LogInForm() {
  const id = useId()
  return (
    <>
    <div>
      <label htmlFor={`${id}-email`}>Email</label>
      <input id={`${id}-email`} type="email" />
    </div>
    <div>
      <label htmlFor={`${id}-password`}>Password</label>
      <input id={`${id}-password`} type="password" />
    </div>
    </>
  )
}

همانطور که در مثال بالا می بینید، یک بار از هوک useId در کامپوننت استفاده کردیم و فقط یک id منحصربه‌فرد را به انتهای id تولید شده توسط این هوک اضافه کردیم. با انجام این کار از ایجاد هزینه‌های سرباری که در نتیجه چندین بار فراخوانی این هوک در یک کامپوننت با چندین id به وجود می‌آید، جلوگیری می‌کنیم.

رندر سمت سرور

یکی دیگر از دلایل اصلی استفاده از هوک useId کمک به رندر سمت سرور است. اگر از چیزی مانند Math.random()یا هر generator اعداد تصادفی دیگر برای تولید idهای خود استفاده ‌کنیم، با این مشکل مواجه خواهیم شد که idهای مربوط به یک کامپوننت در سرور و روی کلاینت متفاوت خواهند بود. این امر به ویژه زمانی مشکل‌ساز می‌شود که ترکیبی از کدهای رندر شده کلاینت و سرور را در برنامه خود داشته باشیم. در چنین شرایطی نمی‌توانیم واقعاً به idهای تولید شده توسط کد خود اعتماد کنیم.

این هوک همه این‌ مشکلات را برطرف می‌کند زیرا idهای تولید شده توسط آن تصادفی نیستند. این بدان معناست که id بین سرور و کلاینت با هم مطابقت خواهد داشت. یعنی مهم نیست که چه ترکیبی از کد رندر شده سمت کلاینت و یا سرور داریم، در هر صورت می‌توانیم به درستی idهای خود اعتماد کنیم. این موضوع بزرگ‌ترین دلیل برای استفاده از هوک useId می‌باشد زیرا کار با کد رندر شده سمت سرور را بسیار آسان‌تر می‌کند.

جمع‌بندی

هوک useId یکی از تغییرات کوچک اما شگفت‌انگیز در نسخه React 18 می‌باشد که بسیار کاربردی بوده و استفاده از آن بسیار ساده می‌باشد.