درک کلیدهای منحصر به فرد برای فرزندان آرایه در React.js

اگر در زمان نمایش لیستی از آیتم ها در ری اکت با خطای مواجه شدید:

      "Each child in an array should have a unique "key" prop" 
    

باید برای هر عنصر در آرایه، چه در سطح بیرونی و چه در سطوح داخلی‌تر، یک کلید منحصر به فرد اختصاص دهید. این کلیدها به React کمک می‌کنند تا تغییرات حداقل را در DOM اعمال کند و رندر را بهینه کند. استفاده از اندیس آرایه (index) به عنوان کلید، در حالی که در برخی موارد ساده ممکن است عمل کند، در بسیاری از سناریوها، به ویژه هنگامی که آرایه تغییر می‌کند (اضافه شدن، حذف شدن یا مرتب شدن عناصر)، می‌تواند منجر به رفتارهای غیرمنتظره و مشکلات عملکردی شود.

برای مثال در کد زیر از اندیس برای این کار استفاده شده است که در صورت اضافه یا کم شدن آیتم به آرایه باعث ایجاد مشکل می شود.

      <tbody>
        {rows.map((row, i) => {
            return <ObjectRow data={row} key={i} />;
        })}
</tbody>
    

می توانیم با استفاده از یک مقدار یکتا در شی row مشکل را به صورت زیر حل کنیم:

      <tbody>
        {rows.map((row, i) => {
            return <ObjectRow data={row} key={row.uniqueId} />;
        })}
</tbody> 
    

استفاده از Math.random() برای تولید کلیدها، به شدت توصیه نمی‌شود، زیرا نه تنها ممکن است کلیدهای تکراری تولید کند، بلکه باعث می‌شود React مجبور شود اجزای بیشتری را مجدداً رندر کند که به شدت بر عملکرد تاثیر منفی خواهد گذاشت.