React परफॉरमेंस ऑप्टिमाइज़ेशन चेकलिस्ट
धीमी एप्लिकेशन बिज़नेस को नुकसान पहुँचाती हैं।
ये हाई बाउंस रेट का कारण बनती हैं और यूजर्स को परेशान करती हैं। ये आपके इंफ्रास्ट्रक्चर खर्च को भी बढ़ाती हैं।
इसे ठीक करने के लिए आपको किसी जटिल ट्रिक की ज़रूरत नहीं है। अधिकांश स्पीड संबंधी समस्याएँ अनावश्यक काम के कारण आती हैं। तेज़ React ऐप्स बनाने के लिए इस चेकलिस्ट का उपयोग करें।
अनावश्यक Re-renders को रोकें
React तेज़ है, लेकिन हज़ारों अतिरिक्त कंपोनेंट्स को रेंडर करना तेज़ नहीं है।
- कंपोनेंट्स को छोटा रखें और बड़े कंपोनेंट्स को विभाजित (split) करें।
- State को उस जगह के करीब ले जाएँ जहाँ आप उसका उपयोग करते हैं।
- React.memo का उपयोग केवल उन्हीं कंपोनेंट्स के लिए करें जो बार-बार रेंडर होते हैं या भारी काम करते हैं।
- हर छोटे कंपोनेंट को React.memo में न लपेटें। प्रॉप्स (props) की तुलना करने में रेंडर करने की तुलना में अधिक लागत आती है।
भारी लॉजिक (Heavy Logic) को संभालें
- डेटा सॉर्टिंग या फ़िल्टरिंग जैसे महंगे कार्यों के लिए useMemo का उपयोग करें।
- जब memoized बच्चों (children) को फ़ंक्शन पास कर रहे हों, तो useCallback का उपयोग करें।
- हर एक फ़ंक्शन के लिए useCallback का उपयोग न करें।
अपने useEffect के उपयोग को सुधारें
सबसे अच्छा useEffect वह है जिसका उपयोग न किया जाए।
- दूसरे state के आधार पर state सेट करने के लिए useEffect का उपयोग न करें।
- इसके बजाय derived data के लिए useMemo का उपयोग करें।
- इससे रेंडर कम होते हैं और कोड साफ़ रहता है।
स्मार्ट तरीके से लोड करें
- अपने कोड को विभाजित करने के लिए React.lazy का उपयोग करें।
- चार्ट या मैप जैसे भारी हिस्सों को केवल आवश्यकता होने पर लोड करने के लिए Suspense का उपयोग करें।
- इससे आपका शुरुआती लोड टाइम बेहतर होता है।
बड़े डेटा को मैनेज करें
- एक साथ 20,000 आइटम्स को रेंडर न करें।
- लिस्ट को वर्चुअलाइज़ (virtualize) करने के लिए react-window जैसी लाइब्रेरी का उपयोग करें।
- यह सुनिश्चित करता है कि आप केवल वही रेंडर करें जो यूजर स्क्रीन पर देख रहा है।
एसेट्स और स्टेट को ऑप्टिमाइज़ करें
- इमेज के लिए WebP या AVIF का उपयोग करें।
- उन इमेज को लेज़ी लोड (lazy load) करें जो अभी स्क्रीन पर नहीं हैं।
- उन वैल्यूज़ के लिए useRef का उपयोग करें जिन्हें UI अपडेट ट्रिगर करने की आवश्यकता नहीं है।
- स्टेट कम करने से रेंडर कम होते हैं।
नेटवर्क ट्रैफिक को नियंत्रित करें
- लगातार API कॉल्स को रोकने के लिए सर्च बार में debouncing का उपयोग करें।
- डेटा को दोबारा उपयोग करने और सर्वर लोड कम करने के लिए कैशिंग लाइब्रेरीज़ का उपयोग करें।
सुनहरा नियम (The Golden Rule)
ऑप्टिमाइज़ करने से पहले मापें।
- React DevTools Profiler का उपयोग करें।
- वास्तविक बाधाओं (bottlenecks) को खोजने के लिए Lighthouse का उपयोग करें।
- उस कोड को ऑप्टिमाइज़ न करें जो पहले से ही तेज़ है।
ऑप्टिमाइज़ेशन सादगी के बारे में है। पहले प्रेडिक्टेबल (predictable) कोड लिखें। दूसरा, मापें। अंत में, ऑप्टिमाइज़ करें।