React Lists आणि Keys मध्ये मास्टर व्हा
React मध्ये लिस्ट रेंडर करणे सोपे आहे, पण ते योग्य पद्धतीने करणे कठीण आहे.
अनेक डेव्हलपर्स 'key' म्हणून array index वापरतात. ही एक चूक आहे. यामुळे बग्स येतात आणि परफॉर्मन्स मंदावतो.
React मध्ये डायनॅमिक डेटा हाताळण्याची योग्य पद्धत खालीलप्रमाणे आहे.
React लिस्टचा वापर कसा करते
React ॲरेचे (arrays) UI एलिमेंट्समध्ये रूपांतर करण्यासाठी map() मेथडचा वापर करते. जेव्हा तुम्ही map() वापरता, तेव्हा React डेटाच्या प्रत्येक भागाचे एका कंपोनंटमध्ये रूपांतर करते.
Keys ची भूमिका
React Virtual DOM वापरते. जेव्हा डेटा बदलतो, तेव्हा React नवीन डेटाची जुन्या डेटाशी तुलना करते. या प्रक्रियेला 'reconciliation' म्हणतात.
Keys युनिक आयडेंटिफायर (unique identifiers) म्हणून काम करतात. कोणता आयटम बदलला, हलवला किंवा डिलीट केला आहे, हे ते React ला अचूकपणे सांगतात.
Key म्हणून Index वापरणे धोकादायक का आहे
Index (0, 1, 2...) चा वापर key म्हणून केल्यामुळे तीन मुख्य समस्या निर्माण होतात:
- Component State Errors: जर तुम्ही लिस्ट सॉर्ट (sort) केली, तर इनपुट फील्ड्स किंवा चेकबॉक्सेस चुकीच्या आयटमचा डेटा दाखवू शकतात.
- Performance Drops: React ला कोणता आयटम कोणता आहे हे ट्रॅक करता येत नाही. यामुळे अनेकदा फक्त एक आयटम रेंडर करण्याऐवजी संपूर्ण लिस्ट पुन्हा रेंडर (re-render) होते.
- Visual Bugs: तुमचे UI योग्य दिसू शकते, पण जेव्हा आयटम्सची जागा बदलते, तेव्हा अंतर्गत लॉजिक (internal logic) फेल होऊ शकते.
Keys वापरण्याची योग्य पद्धत
तुमचे ॲप फास्ट आणि स्टेबल ठेवण्यासाठी, या नियमांचे पालन करा:
- Unique IDs वापरा: नेहमी तुमच्या डेटाबेस मधून घेतलेले IDs वापरा (जसे की UUID किंवा primary key).
Math.random()कधीही वापरू नका: रेंडरिंग दरम्यान keys जनरेट केल्यामुळे प्रत्येक अपडेटवर React ला प्रत्येक एलिमेंट पुन्हा तयार करावा लागतो. यामुळे परफॉर्मन्स खूप कमी होतो.- Keys स्टेबल ठेवा: डेटाच्या संपूर्ण लाइफसायकलमध्ये एकाच डेटासाठी की (key) नेहमी सारखीच असायला हवी.
एका दृष्टीक्षेपात तुलना
वैशिष्ट्य: स्थिरता (Stability) Index वापरणे: अस्थिर (Unstable) Unique ID वापरणे: अत्यंत स्थिर (Highly Stable)
वैशिष्ट्य: परफॉर्मन्स (Performance) Index वापरणे: खराब (Poor) Unique ID वापरणे: सर्वोत्तम (Optimal)
वैशिष्ट्य: स्टेट सेफ्टी (State Safety) Index वापरणे: असुरक्षित (Unsafe) Unique ID वापरणे: १००% सुरक्षित (100% Safe)
डेव्हलपर्ससाठी सारांश
map() मेथड वापरा. key प्रॉपला एक युनिक आणि स्टेबल ID पास करा. ज्या लिस्टमध्ये बदल, सॉर्टिंग किंवा फिल्टरिंग होऊ शकते, तिथे array index वापरणे टाळा.