چرا استفاده از ایندکس به عنوان کلید (key) در React ایده بدی است
شما یک لیست پویا در React میسازید. یک آیتم را حذف میکنید. ناگهان، وضعیت UI یک آیتم دیگر تغییر میکند. یا یک لیست را مرتب میکنید و دادههای ورودی در کامپوننتهای اشتباه ظاهر میشوند.
این اتفاق به این دلیل میافتد که شما از ایندکس آرایه به عنوان کلید استفاده کردهاید.
React از سیستمی به نام Virtual DOM برای بهروزرسانی UI شما استفاده میکند. وقتی state شما تغییر میکند، React درخت جدید را با درخت قدیمی مقایسه میکند. این فرآیند reconciliation نامیده میشود.
ویژگی key مانند یک کارت شناسایی برای کامپوننتهای شما عمل میکند. این ویژگی به React میگوید:
- کدام آیتم تغییر کرده است.
- کدام آیتم جدید است.
- کدام آیتم حذف شده است.
اگر از ایندکس به عنوان کلید استفاده کنید، مشکل ایجاد میکنید. آرایهها پویا هستند. وقتی آیتمها را اضافه، حذف یا جابهجا میکنید، ایندکس تغییر میکند.
دلیل شکست این روش اینجاست:
۱. مشکلات عملکردی (Performance)
اگر یک آیتم را در ابتدای لیست درج کنید، تمام آیتمهای بعد از آن ایندکس جدیدی میگیرند. React تصور میکند که تمام آیتمها تغییر کردهاند. در نتیجه، به جای اینکه فقط آیتم جدید را رندر کند، کل لیست را دوباره رندر (re-render) میکند.
۲. باگهای مربوط به وضعیت (State)
این خطرناکترین بخش است. اگر آیتمهای لیست شما دارای وضعیت داخلی باشند (مانند یک فیلد ورودی یا یک چکباکس)، ایندکس باعث ایجاد باگ میشود.
تصور کنید عبارت "Important" را در ورودی اولین تسک تایپ میکنید. آن تسک را حذف میکنید. اگر از ایندکس به عنوان کلید استفاده کرده باشید، React میبیند که ایندکس 0 هنوز وجود دارد. بنابراین از کامپوننت قدیمی دوباره استفاده میکند. حالا متن "Important" شما در کادر ورودی تسک دوم ظاهر میشود.
روش صحیح انجام کار:
- استفاده از IDهای دیتابیس: همیشه از شناسه منحصربهفرد دیتابیس خود (مانند
_idیاid) استفاده کنید. - تولید ID در سمت فرانتاند: اگر دیتابیس ندارید، از کتابخانههایی مانند
uuidیاnanoidاستفاده کنید. - استفاده از APIهای مرورگر: از
window.crypto.randomUUID()برای روشی داخلی جهت ایجاد شناسههای منحصربهفرد استفاده کنید.
چه زمانی میتوانید با خیال راحت از ایندکس استفاده کنید؟
تنها در صورتی که لیست شما این سه قانون را رعایت کند:
- لیست ایستا (static) باشد (بدون اضافه یا حذف کردن).
- لیست هرگز تغییر ترتیب ندهد (بدون مرتبسازی یا فیلتر کردن).
- آیتمها وضعیت داخلی نداشته باشند (بدون فیلد ورودی یا چکباکس).
برای اینکه اپلیکیشنهای خود را سریع و بدون باگ نگه دارید، از استفاده از ایندکس به عنوان کلید دست بکشید.