तुम्हाला React 'key' prop ची गरज का आहे
तुमच्या कन्सोलमध्ये तुम्हाला ही चेतावणी (warning) दिसते: "Each child in a list should have a unique 'key' prop."
अनेक डेव्हलपर्स याकडे दुर्लक्ष करतात. ही एक चूक आहे. 'key' prop हे केवळ एक चेतावणी नाही. ते परफॉर्मन्स सुधारण्यासाठी आणि बग्स (bugs) टाळण्यासाठी एक साधन आहे.
'key' prop नक्की काय करते?
React लिस्टमधील आयटम्स ओळखण्यासाठी 'key' चा वापर करते. कोणता आयटम बदलला, हलवला किंवा काढून टाकला आहे, हे यामुळे React ला समजते.
'key' शिवाय, React ला संपूर्ण लिस्ट पुन्हा रेंडर (re-render) करावी लागते. यामुळे तुमचे ॲप स्लो होते आणि डेटा संबंधित बग्स येऊ शकतात.
लायब्ररीचे उदाहरण
१,००० पुस्तके असलेल्या एका लायब्ररीची कल्पना करा. जर तुम्ही मध्यभागी एक नवीन पुस्तक ठेवले, तर जागा करण्यासाठी तुम्हाला इतर सर्व पुस्तके हलवावी लागतील.
React मध्ये, 'key' एका युनिक ID प्रमाणे काम करते. ते प्रत्येक एलिमेंटला एक ओळख देते. 'reconciliation' प्रक्रियेदरम्यान, React नवीन लिस्टची जुन्या लिस्टशी तुलना करते.
'key' नसेल तर येणारी समस्या
जर तुम्ही 'key' वापरली नाही, तर React ला वाटते की प्रत्येक आयटम सारखाच आहे. जर तुम्ही सुरुवातीला एक आयटम जोडला, तर React ला वाटते की संपूर्ण लिस्ट बदलली आहे. यामुळे ते DOM मधील प्रत्येक एलिमेंट पुन्हा तयार करते. यामुळे मेमरी (memory) आणि CPU वाया जातो.
'Index' चा सापळा
नवीन डेव्हलपर्स अनेकदा array index चा 'key' म्हणून वापर करतात.
उदाहरण: key={index}
डायनॅमिक लिस्टसाठी हे धोकादायक आहे. जर तुम्ही आयटम्स सॉर्ट (sort), फिल्टर (filter) किंवा डिलीट (delete) केले, तर इंडेक्स बदलतो. यामुळे चुकीची UI स्थिती आणि बग्स निर्माण होतात.
'Keys' साठी सर्वोत्तम पद्धती (Best Practices)
- तुमच्या डेटाबेस मधून स्थिर (stable) IDs वापरा (उदा.
user.id). - 'keys' त्यांच्या सिब्लिंग्स (siblings) मध्ये युनिक असल्याची खात्री करा.
- 'key' म्हणून
Math.random()वापरणे टाळा. ते प्रत्येक रेंडरमध्ये बदलते आणि त्यामुळे UI फ्लिकरिंग (flickering) होते. - जर तुमच्या डेटामध्ये ID नसेल, तर डेटा फेच (fetch) करताना
uuidकिंवाnanoidवापरून एक ID तयार करा.
'Key' निवडण्यासाठी मार्गदर्शक
• Database ID: सर्वोत्तम. अत्यंत स्थिर आणि वेगवान. • Array Index: फक्त अशा स्टॅटिक (static) लिस्टसाठी वापरा ज्या कधीही बदलत नाहीत. • Math.random(): टाळा. यामुळे अनावश्यक री-माउंट्स (re-mounts) होतात.
सारांश
एक चांगली 'key' तुमचे ॲप अधिक वेगवान बनवते. यामुळे अनावश्यक री-रेंडर्स (re-renders) ४०% पर्यंत कमी होऊ शकतात. नेहमी स्थिर आणि युनिक आयडेंटिफायर्सना (identifiers) प्राधान्य द्या.