React Native Academy · पाठ

Flipper और React DevTools से प्रोफ़ाइलिंग

पाठ 1, कुल 4 में से13 चरण

Flipper और React DevTools से प्रोफ़ाइलिंग, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

प्रदर्शन प्रोफ़ाइल बनाना क्यों महत्वपूर्ण है

React Native ऐप्स में फ़्रेम छूटना, सूची का धीमे स्क्रॉल होना, स्टार्टअप में अधिक समय लगना और अत्यधिक मेमोरी उपयोग जैसी समस्याएँ हो सकती हैं — ये सभी उपयोगकर्ताओं को परेशान करती हैं। अनुकूलन करने से पहले आपको मापना चाहिए, ताकि यह समझ सकें कि वास्तविक अड़चन कहाँ है; अनुमान लगाकर और बिना प्रमाण के बदलाव करना उचित नहीं है।

React Native के लिए दो मुख्य प्रोफ़ाइल उपकरण हैं: फ़्लिपर (एक नेटिव डीबगिंग प्लेटफ़ॉर्म) और React DevTools (जिसमें कंपोनेंट प्रोफ़ाइलर शामिल है)। दोनों का साथ में उपयोग करने पर आपको JS थ्रेड के प्रदर्शन और कंपोनेंट रेंडर ट्री, दोनों की स्पष्ट जानकारी मिलती है।

फ़्लिपर सेट अप करना

फ़्लिपर Meta का डेस्कटॉप ऐप्लिकेशन है, जो USB या नेटवर्क के ज़रिए चल रहे React Native ऐप्स से जुड़ता है और रियल-टाइम डीबगिंग डेटा दिखाता है। इसे fbflipper.com से डाउनलोड करके अपने विकास कंप्यूटर पर इंस्टॉल करें।

फ़्लिपर, वास्तविक डिवाइस और सिम्युलेटर पर React Native CLI प्रोजेक्ट्स के साथ तुरंत काम करता है। Expo ऐप्स के लिए आपको विकास बिल्ड का उपयोग करना होगा (Expo Go का नहीं)। कनेक्ट होने के बाद, फ़्लिपर का साइडबार React DevTools, Network Inspector, Hermes Debugger और Layout Inspector जैसे उपलब्ध प्लगइन दिखाता है।

React DevTools प्लगइन

फ़्लिपर में मौजूद React DevTools प्लगइन आपको कंपोनेंट ट्री की रियल-टाइम जाँच करने देता है। आप किसी भी कंपोनेंट को चुनकर दाएँ पैनल में उसकी वर्तमान प्रॉप्स, स्थिति और हुक मान देख सकते हैं। यह समझने के लिए बेहद उपयोगी है कि कोई कंपोनेंट अप्रत्याशित मानों के साथ रेंडर क्यों हो रहा है।

आप स्वतंत्र रूप से react-devtools पैकेज का भी उपयोग कर सकते हैं: इसे npm install -g react-devtools से वैश्विक रूप से इंस्टॉल करें, फिर react-devtools चलाएँ और डेवलपर मेन्यू खोलने तथा कनेक्ट करने के लिए अपने डिवाइस को हिलाएँ।

# Install standalone React DevTools
npm install -g react-devtools

# Start the DevTools server
react-devtools

# In your app, shake the device and tap 'Open Debugger'
# OR in the Metro bundler terminal, press 'd' to open the dev menu

React प्रोफ़ाइलर: रेंडर रिकॉर्ड करना

React DevTools के अंदर Profiler टैब यह रिकॉर्ड करता है कि कौन-से कंपोनेंट रेंडर हुए और हर रेंडर में कितना समय लगा। Record पर क्लिक करें, ऐप के साथ इंटरैक्ट करें (सूची स्क्रॉल करें, फ़ील्ड में लिखें या बटन दबाएँ), फिर Stop पर क्लिक करें। फ़्लेम ग्राफ़ हर रेंडर दिखाता है और उसे पीले (धीमे) से नीले (तेज़) रंग तक प्रदर्शित करता है।

फ़्लेम ग्राफ़ की हर पट्टी कंपोनेंट के दोबारा रेंडर होने को दर्शाती है। ऊँची पट्टियाँ बताती हैं कि रेंडर करने में अधिक समय लगा। किसी पट्टी पर क्लिक करने से मिलीसेकंड में रेंडर अवधि और वे प्रॉप्स या हुक दिखते हैं जिनमें बदलाव के कारण दोबारा रेंडर हुआ।

अनावश्यक दोबारा रेंडर की पहचान करना

प्रदर्शन की एक आम समस्या ऐसे कंपोनेंट हैं जो अपनी प्रॉप्स या स्थिति में वास्तविक बदलाव न होने पर भी दोबारा रेंडर होते हैं। React प्रोफ़ाइलर में उन कंपोनेंट पर ध्यान दें जो उपयोगकर्ता के उनसे इंटरैक्ट न करने पर भी फ़्लेम ग्राफ़ के हर फ़्रेम में दिखाई देते हैं — ये मेमोआइज़ेशन के संभावित उम्मीदवार हैं।

आप React DevTools में अपडेट हाइलाइट करें विकल्प भी सक्षम कर सकते हैं। जब भी कोई कंपोनेंट दोबारा रेंडर होता है, तो स्क्रीन पर उसके चारों ओर रंगीन बॉर्डर चमकता है। हरे रंग का अर्थ तेज़ रेंडर और पीले रंग का अर्थ धीमा रेंडर है। एक बटन दबाने पर पूरी स्क्रीन का चमकना अत्यधिक दोबारा रेंडर होने का संकेत है।

लेआउट इंस्पेक्टर और नेटवर्क टैब

फ़्लिपर का Layout Inspector नेटिव व्यू पदानुक्रम दिखाता है, जो iOS View Debugger या Android Layout Inspector जैसा है। आप इंस्पेक्टर में किसी भी एलिमेंट पर टैप करके उसे डिवाइस पर हाइलाइट कर सकते हैं और उसकी नेटिव लेआउट प्रॉपर्टी की जाँच कर सकते हैं।

Network Inspector ऐप द्वारा किए गए सभी HTTP अनुरोध दिखाता है, जिनमें हेडर, बॉडी और प्रतिक्रिया शामिल हैं। यह अनावश्यक API कॉल, असामान्य रूप से धीमे एंडपॉइंट या गलत तरीके से कॉन्फ़िगर किए गए कैशिंग हेडर पहचानने में उपयोगी है, जिनके कारण डेटा बार-बार अनावश्यक रूप से प्राप्त होता है।

Hermes और JS थ्रेड का प्रदर्शन

React Native मोबाइल के लिए अनुकूलित JavaScript इंजन Hermes का उपयोग React Native 0.70 से डिफ़ॉल्ट इंजन के रूप में करता है। Hermes बिल्ड के समय JavaScript को बाइटकोड में पहले से संकलित करता है, जिससे स्टार्टअप समय बहुत कम हो जाता है। फ़्लिपर का Hermes Debugger आपको CPU उपयोग की प्रोफ़ाइल बनाने और JS हीप में मेमोरी आवंटन की जाँच करने देता है।

JS थ्रेड के प्रदर्शन की प्रोफ़ाइल बनाने के लिए Hermes Debugger के Timeline टैब का उपयोग करें। एक सत्र रिकॉर्ड करें, फिर ऐसे लंबे JavaScript कार्य खोजें जो यूआई थ्रेड को रोकते हैं। 16ms से अधिक लंबे कार्य फ़्रेम छूटने का कारण बनते हैं (60fps से कम)।

Performance Monitor से FPS मापना

React Native का अंतर्निहित Performance Monitor (डेवलपर मेन्यू से उपलब्ध) प्रति सेकंड फ़्रेम की संख्या रियल-टाइम में दिखाता है। दो FPS काउंटर प्रदर्शित होते हैं: JS FPS (JavaScript कितनी तेज़ी से चलता है) और UI FPS (नेटिव रूप से फ़्रेम कितनी तेज़ी से रेंडर होते हैं)।

दोनों के लिए लक्ष्य 60 FPS है। यदि JS FPS घटता है लेकिन UI FPS ऊँचा रहता है, तो अड़चन JavaScript लॉजिक में है। यदि JS FPS ऊँचा रहते हुए UI FPS घटता है, तो अड़चन नेटिव रेंडरिंग परत में है — अक्सर बहुत अधिक Views या जटिल शैडो इसके कारण होते हैं।

Microbenchmark के लिए console.time का उपयोग

विशिष्ट कार्यों का त्वरित मापन करने के लिए — जैसे API प्रतिक्रिया संसाधित करने या बड़े ऐरे को फ़िल्टर करने में कितना समय लगता है — console.time और console.timeEnd का उपयोग करें। ये Hermes में उपलब्ध हैं और Metro/फ़्लिपर कंसोल में काम करते हैं।

यह उन महँगे डेटा रूपांतरणों की पहचान करने में उपयोगी है जिन्हें सूची रेंडर करने से पहले JS थ्रेड से बाहर ले जाया, मेमोआइज़ या सरल किया जा सकता है।

// Measure array sorting performance
console.time('sortPosts');
const sorted = posts.sort((a, b) => b.createdAt - a.createdAt);
console.timeEnd('sortPosts'); // e.g., 'sortPosts: 3.14ms'

// Measure a network call
console.time('fetchUser');
const user = await fetchUserById(userId);
console.timeEnd('fetchUser'); // e.g., 'fetchUser: 245ms'

अनुकूलन से पहले मापना क्यों ज़रूरी है

एक आम गलती यह है कि सावधानी के तौर पर हर जगह मेमोआइज़ेशन (React.memo, useCallback, useMemo) लागू कर दिया जाए। इससे वास्तव में लागत बढ़ती है — मेमोआइज़ेशन हर रेंडर पर तुलना फ़ंक्शन चलाता है, और सरल कंपोनेंट के लिए यह तुलना दोबारा रेंडर करने से भी अधिक महँगी हो सकती है।

नियम यह है: पहले प्रोफ़ाइल बनाएँ, फिर वहीं अनुकूलन करें जहाँ प्रोफ़ाइलर वास्तविक अड़चन दिखाए। React प्रोफ़ाइलर का Why did this render? पैनल प्रत्येक कंपोनेंट के लिए बदली हुई सटीक प्रॉप्स या हुक बताता है, ताकि आपको ठीक-ठीक पता हो कि किसे मेमोआइज़ करना है।

प्रोडक्शन में प्रदर्शन की निगरानी

फ़्लिपर से किया गया विकास-समय का प्रोफ़ाइल केवल आपके कंप्यूटर पर प्रदर्शन दिखाता है। प्रोडक्शन से जानकारी पाने के लिए Firebase Performance Monitoring या Sentry Performance जैसे प्रदर्शन निगरानी उपकरण को एकीकृत करें। ये ऐप स्टार्टअप समय, स्क्रीन रेंडर अवधि और HTTP अनुरोध विलंबता सहित वास्तविक उपयोगकर्ता मेट्रिक्स एकत्र करते हैं।

विशिष्ट प्रवाहों में मापन जोड़ने के लिए Firebase Performance से perf().startTrace('my-operation') का उपयोग करें और Firebase कंसोल में देश, डिवाइस और ऐप संस्करण के अनुसार विभाजित समय संबंधी डेटा देखें।

import perf from '@react-native-firebase/perf';

async function loadFeed() {
  const trace = await perf().startTrace('load_feed');

  try {
    const data = await fetchFeedData();
    setFeed(data);
    trace.putMetric('item_count', data.length);
  } finally {
    await trace.stop(); // Records duration to Firebase
  }
}

त्वरित जाँच

इस पाठ से React Native मोबाइल विकास की अवधारणाओं की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: घटक रेंडर को रिकॉर्ड करने के लिए Flipper और React DevTools Profiler का उपयोग कैसे करें, Highlight Updates ओवरले का उपयोग करके अनावश्यक पुनः-रेंडर की पहचान कैसे करें, और अनुकूलन लागू करने से पहले प्रोफ़ाइलिंग टूल से माप लेना हमेशा क्यों ज़रूरी है। आगे हम React.memo, useCallback और useMemo के साथ मेमोइज़ेशन तकनीकें लागू करेंगे, ताकि पहचानी गई अड़चनों को दूर किया जा सके।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Flipper और React DevTools से प्रोफ़ाइलिंग” पाठ निःशुल्क है?

हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Flipper और React DevTools से प्रोफ़ाइलिंग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Flipper और React DevTools से प्रोफ़ाइलिंग” में मैं क्या सीखूँगा?

चल रहे ऐप को Flipper से जोड़ें, component tree का निरीक्षण करने के लिए React DevTools प्लगइन का उपयोग करें, render trace रिकॉर्ड करें और पहचानें कि कौन-से components अनावश्यक रूप से दोबारा render होत… आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“Flipper और React DevTools से प्रोफ़ाइलिंग” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Flipper और React DevTools से प्रोफ़ाइलिंग
React.memo, useCallback और useMemo से Memoization
FlatList प्रदर्शन में सुधार
Bundle Size और Lazy Loading

← React Native Academy पर वापस जाएँ