چرا به propِ key در React نیاز دارید
این خطا را در کنسول خود میبینید: "Each child in a list should have a unique 'key' prop."
بسیاری از توسعهدهندگان از آن چشمپوشی میکنند. این یک اشتباه است. این هشدار درباره مشکلات عملکردی (performance) و باگهای احتمالی به شما اطلاع میدهد.
propِ key چیست؟
این ویژگی به React کمک میکند تا آیتمهای خاص را در یک لیست شناسایی کند. به React میگوید کدام آیتم تغییر کرده، جابهجا شده یا حذف شده است. بدون یک key، React هر بار که چیزی تغییر میکند، کل لیست را دوباره رندر (re-render) میکند. این کار سرعت اپلیکیشن شما را کاهش میدهد.
کتابخانهای با ۱۰۰۰ کتاب را تصور کنید. اگر یک کتاب جدید در میان آنها اضافه کنید، باید تمام کتابهای دیگر را جابهجا کنید تا جا باز شود. یک key مانند یک شناسه (ID) منحصربهفرد برای هر کتاب عمل میکند و به React اجازه میدهد بدون جابهجا کردن بقیه موارد، دقیقاً همان نقطه را پیدا کند.
فرآیند Reconciliation
React از یک الگوریتم diffing برای مقایسه Virtual DOM جدید با نسخه قدیمی استفاده میکند.
- تغییرات State.
- React یک درخت جدید میسازد.
- React درختها را با استفاده از
keyها مقایسه میکند. - React فقط عناصر تغییر یافته را بهروزرسانی میکند.
اشتباه رایج: استفاده از ایندکس آرایه به عنوان key
اگر لیست شما تغییر میکند، هرگز از key={index} استفاده نکنید. اگر آیتمی را اضافه یا حذف کنید، ایندکس تمام آیتمها تغییر میکند. در این حالت React دچار سردرگمی شده و آیتمهایی را که در واقع تغییری نکردهاند، دوباره رندر میکند. این کار باعث هدر رفتن حافظه و بروز باگهای UI میشود.
چگونه آن را اصلاح کنیم:
- از یک ID پایدار از دیتابیس خود استفاده کنید (مانند
user.id). - اگر دادههای شما فاقد ID هستند، از یک رشته منحصربهفرد مانند
uuidاستفاده کنید. - از
Math.random()برایkeyها استفاده نکنید. این کار در هر بار رندر، یک ID جدید ایجاد میکند که باعث میشود کامپوننتها دوباره re-mount شوند و منجر به پرش (flickering) در رابط کاربری شود.
بهترین تمرینها (Best practices):
keyها باید پایدار باشند.keyها باید در میان فرزندان همسطح (siblings) منحصربهفرد باشند.- برای بهترین عملکرد، از IDهای دیتابیس استفاده کنید.
جدول مقایسه key:
• Database ID: توصیه شده. پایدار و سریع. • Array Index: توصیه نمیشود. هنگام مرتبسازی یا فیلتر کردن باعث ایجاد باگ میشود. • Math.random(): اجتناب کنید. باعث re-mountهای غیرضروری میشود.
خلاصهای برای گردش کار شما:
اگر این خطا را مشاهده کردید، یعنی کامپوننتهای شما فاقد یک شناسه دائمی هستند. پاسخ API خود را برای یافتن فیلدهای منحصربهفرد مانند email یا ID بررسی کنید. با اصلاح این مورد، ۳۰ تا ۴۰ درصد از رندرهای غیرضروری جلوگیری کنید.