چطور کلیدهای یکتایی برای عناصر React ایجاد کنیم؟

در React، وقتی که شما لیستی از عناصر رو رندر می‌کنید، برای بهبود کارایی و ردیابی دقیق تغییرات در DOM مجازی، باید به هر عنصر یک کلید یکتا اختصاص بدید. این کلیدها به React کمک می‌کنن تا تغییرات بین رندرها رو به درستی مدیریت کنه.

یکی از راه‌های ساده برای ایجاد کلید یکتا استفاده از ویژگی id یا هر نوع داده یکتای دیگری است که در داده‌های شما موجود است. اما اگر داده یکتایی ندارید یا نیاز دارید که به سرعت کلیدهای یکتا تولید کنید، می‌تونید از روش‌های زیر استفاده کنید:

1. استفاده از شاخص آرایه: می‌تونید از index هر عنصر به عنوان کلید استفاده کنید، ولی این کار در صورتی که عناصر ممکنه جابه‌جا بشن یا اضافه/حذف بشن، توصیه نمی‌شه.

   {items.map((item, index) => (
     <ListItem key={index} item={item} />
   ))}

2. استفاده از crypto.randomUUID(): یکی از راه‌های مناسب استفاده از crypto.randomUUID() برای تولید کلیدهای یکتا است. این روش تضمین می‌کنه که کلیدها همیشه یکتا و ثابت باقی می‌مونن

const randomID = () => crypto.randomUUID() {items.map(
(item) => ( <ListItem key={randomID()} item={item} /> )
)}

نکته: این روش برای مواردی مناسبه که کلیدها بین رندرهای متوالی تغییر نکنند، چون تولید دوباره UUID ها در هر رندر می‌تونه کارایی رو تحت تأثیر قرار بده.

3. استفاده از داده یکتای موجود: اگر هر آیتم در لیست یک ویژگی یکتای مشخص مثل id داره، بهترین روش اینه که از اون ویژگی به عنوان کلید استفاده کنید:

{items.map(item => (
  <ListItem key={item.id} item={item} />
))}

در نهایت، سعی کنید همیشه از کلیدهای یکتا و قابل پیش‌بینی استفاده کنید تا کارایی برنامه React شما بهبود پیدا کنه و از بروز مشکلات غیرمنتظره جلوگیری بشه.