तुम्हाला React Key Prop ची गरज का आहे
तुम्हाला तुमच्या console मध्ये ही एरर दिसते: "Each child in a list should have a unique 'key' prop."
अनेक डेव्हलपर्स याकडे दुर्लक्ष करतात. ही एक चूक आहे. ही चेतावणी (warning) तुम्हाला परफॉर्मन्सच्या समस्या आणि संभाव्य बग्सबद्दल सांगते.
key prop म्हणजे काय?
हे React ला लिस्ट मधील विशिष्ट आयटम्स ओळखण्यास मदत करते. कोणता आयटम बदलला, हलवला किंवा काढून टाकला आहे, हे ते React ला सांगते. key शिवाय, जेव्हा काहीही बदलले की React संपूर्ण लिस्ट पुन्हा re-render करते. यामुळे तुमचे ॲप स्लो होते.
१००० पुस्तकांच्या लायब्ररीचा विचार करा. जर तुम्ही मध्यभागी एक नवीन पुस्तक ठेवले, तर जागा बनवण्यासाठी तुम्हाला इतर सर्व पुस्तके हलवावी लागतील. key हे प्रत्येक पुस्तकासाठी एका युनिक ID सारखे काम करते. यामुळे React ला इतर काहीही न हलवता नेमकी जागा शोधता येते.
Reconciliation Process
React नवीन Virtual DOM ची जुन्या Virtual DOM सोबत तुलना करण्यासाठी 'diffing algorithm' वापरते.
- State बदलतो.
- React एक नवीन tree तयार करते.
- React keys वापरून trees ची तुलना करते.
- React फक्त बदललेले elements अपडेट करते.
सामान्य चूक: array index ला key म्हणून वापरणे.
जर तुमची लिस्ट बदलत असेल, तर कधीही key={index} वापरू नका. जर तुम्ही आयटम्स जोडले किंवा काढून टाकले, तर प्रत्येक आयटमचा index बदलतो. यामुळे React गोंधळून जाईल आणि जे आयटम्स प्रत्यक्षात बदललेले नाहीत, त्यांनाही पुन्हा re-render करेल. यामुळे मेमरी वाया जाते आणि UI मध्ये बग्स येतात.
हे कसे सुधारावे:
- तुमच्या डेटाबेस मधून एक स्थिर (stable) ID वापरा (उदा.
user.id). - जर तुमच्या डेटा मध्ये ID नसेल, तर
uuidसारखी युनिक स्ट्रिंग वापरा. - Keys साठी
Math.random()वापरणे टाळा. हे प्रत्येक render ला एक नवीन ID तयार करते, ज्यामुळे components पुन्हा re-mount होतात आणि UI मध्ये flickering (झिझपणे) होते.
सर्वोत्तम पद्धती (Best practices):
- Keys स्थिर (stable) असाव्यात.
- Siblings मध्ये Keys युनिक असाव्यात.
- सर्वोत्तम परफॉर्मन्ससाठी डेटाबेस IDs वापरा.
Key Comparison Table:
| प्रकार | शिफारस | परिणाम |
|---|---|---|
| Database ID | शिफारसीय (Recommended) | स्थिर आणि वेगवान. |
| Array Index | शिफारसीय नाही | Sorting किंवा filtering दरम्यान बग्स येऊ शकतात. |
| Math.random() | टाळा | अनावश्यक re-mounts होतात. |
तुमच्या वर्कफ्लोसाठी सारांश:
जर तुम्हाला ही एरर दिसत असेल, तर तुमच्या components मध्ये कायमस्वरूपी ओळख (permanent identifier) नाही. तुमच्या API response मध्ये email किंवा ID सारखी युनिक फील्ड्स आहेत का ते तपासा. अनावश्यक re-renders ३०-४०% ने कमी करण्यासाठी हे दुरुस्त करा.