چرا به propِ key در React نیاز دارید
این هشدار را در کنسول خود مشاهده میکنید: "Each child in a list should have a unique 'key' prop."
بسیاری از توسعهدهندگان آن را نادیده میگیرند. این یک اشتباه است. key prop صرفاً یک هشدار نیست؛ بلکه ابزاری برای بهبود عملکرد و جلوگیری از باگ است.
key prop چه کاری انجام میدهد؟
React از key برای شناسایی آیتمهای لیست استفاده میکند. این ویژگی به React میگوید کدام آیتم تغییر کرده، جابهجا شده یا حذف شده است.
بدون داشتن key ، React مجبور است کل لیست را دوباره رندر (re-render) کند. این کار باعث کند شدن اپلیکیشن شما و بروز باگهای دادهای میشود.
مثال کتابخانه
کتابخانهای با ۱۰۰۰ کتاب را تصور کنید. اگر یک کتاب جدید را در میان آنها اضافه کنید، باید تمام کتابهای دیگر را جابهجا کنید تا فضا باز شود.
در React، ویژگی key مانند یک شناسه (ID) منحصربهفرد عمل میکند و به هر المان هویت میبخشد. در طول فرآیند reconciliation، React لیست جدید را با لیست قدیمی مقایسه میکند.
مشکل نبودِ key
اگر از key استفاده نکنید، React تصور میکند که تمام آیتمها یکسان هستند. اگر یک آیتم را به ابتدای لیست اضافه کنید، React فکر میکند کل لیست تغییر کرده است و تمام المانها را در DOM دوباره میسازد. این کار باعث هدر رفتن حافظه و CPU میشود.
تلهی ایندکس (The Index Trap)
توسعهدهندگان تازهکار اغلب از ایندکس آرایه به عنوان key استفاده میکنند.
مثال: key={index}
این کار برای لیستهای پویا (dynamic) خطرناک است. اگر آیتمها را مرتب (sort)، فیلتر یا حذف کنید، ایندکس تغییر میکند. این موضوع منجر به وضعیتهای نادرست در UI و بروز باگ میشود.
بهترین روشها برای استفاده از key
- از شناسههای پایدار (stable IDs) دیتابیس خود استفاده کنید (مانند
user.id). - اطمینان حاصل کنید که
keyها در میان فرزندان همسطح (siblings) منحصربهفرد باشند. - از استفاده از
Math.random()به عنوانkeyخودداری کنید. این مقدار در هر رندر تغییر میکند و باعث پرش (flickering) در UI میشود. - اگر دادههای شما فاقد ID هستند، هنگام دریافت دادهها، یکی با استفاده از
uuidیاnanoidتولید کنید.
راهنمای انتخاب key
• Database ID: بهترین گزینه. بسیار پایدار و سریع. • Array Index: فقط برای لیستهای ایستا (static) که هرگز تغییر نمیکنند استفاده شود. • Math.random(): خودداری کنید. باعث بازسازی (re-mount) غیرضروری المانها میشود.
خلاصه
یک key مناسب، اپلیکیشن شما را سریعتر میکند و میتواند تا ۴۰٪ از رندرهای غیرضروری جلوگیری کند. همیشه شناسههای پایدار و منحصربهفرد را در اولویت قرار دهید.