- मौजूदा टूल्स (
Profiler, Why Did You Render?, React Devtools) के विपरीत, इसमें लगभग कोई code changes की ज़रूरत नहीं होती और यह simple visual cues तथा programmable API देता है
- performance समस्याएँ पैदा करने वाले renders को अपने-आप detect और highlight करता है, और यह भी दिखाता है कि ठीक किस component को सुधारना चाहिए
- यह simple Javascript है, इसलिए इसे कहीं भी जोड़ा जा सकता है: Script tag, NPM आदि
React Scan की ज़रूरत क्यों है
- React को optimize करना मुश्किल हो सकता है
- जानबूझकर component props की तुलना value से नहीं बल्कि reference से की जाती है। इससे rendering execution cost कम होती है
- लेकिन ऐसा करने से गलती से unnecessary renders होना आसान हो जाता है, जिससे app धीमा पड़ सकता है
- सैकड़ों developers वाले बड़े production apps में भी optimization अक्सर कठिन होता है (GitHub, Twitter, Instagram के उदाहरण).
React Scan, React Devtools से बेहतर कैसे है
- React Devtools की सीमाएँ:
- इसे एक general-purpose tool के रूप में डिज़ाइन किया गया है, इसलिए यह unnecessary renders और necessary renders के बीच स्पष्ट अंतर नहीं कर पाता।
- programmable API न होने के कारण performance debugging को automate करना कठिन है।
- React Devtools के highlight feature को लेकर व्यक्तिगत असंतोष:
- render detection में देरी: React Devtools rendering को batches में process करता है, इसलिए बहुत तेज़ी से render होने वाले components को प्रति सेकंड सिर्फ़ एक बार दिखाता है।
- box position update समस्या: scroll करने या size बदलने पर box की position update नहीं होती।
- render count दिखाने की कमी: यह हर component के renders की संख्या नहीं दिखाता।
- problematic renders को अलग पहचानना मुश्किल: slow या inefficient rendering की पुष्टि करने के लिए component को manually inspect करना पड़ता है।
- user experience की कमी: menu छिपा हुआ होता है, इसलिए features को on/off करना असुविधाजनक है। UI performance debugging के लिए उपयुक्त नहीं है।
- programmatic API नहीं: debugging को automate करने या advanced कामों के लिए इस्तेमाल नहीं किया जा सकता।
- Chrome extension तक सीमित: इसे web पर कहीं भी इस्तेमाल नहीं किया जा सकता और यह browser extension पर निर्भर है।
- subjective design समस्या: box lines धुंधली लगती हैं और यह धीमे काम करने जैसा महसूस होता है।
- React Scan की अलग पहचान:
- यह performance debugging के लिए डिज़ाइन किया गया एक specialized tool है, जो unnecessary renders को स्पष्ट रूप से पहचानता है।
- यह सभी platforms पर इस्तेमाल किया जा सकता है (web, script, npm), और developer experience को optimize करता है।
- इसका ambitious feature roadmap, React Devtools से आगे जाने की संभावना देता है।
3 टिप्पणियां
देखने में आसान है, इसलिए अच्छा है।
बहुत उपयुक्त उपयोग उदाहरण
शायद डेमो छोटा ऐप है, इसलिए प्रतिक्रिया गति तेज़ लग रही है।