← Back to React Course | Chapter 14: Performance & Production Deployment | Lesson 4 of 13

React Profiler का उपयोग

React Profiler आपके app के लिए एक stopwatch और clipboard जैसा है, timing करते हुए exactly हर component को render होने में कितना समय लगता है ताकि आप जानें actually कहां focus करना है।

In this page:

  1. एक Profiling Session Record करना
  2. Flame Graph पढ़ना
  3. Production-Like Build के साथ Profiling करना

एक Profiling Session Record करना

React DevTools में Profiler tab आपको record click करने, अपने app में कोई interaction perform करने (जैसे एक search box में type करना या एक button click करना), फिर recording stop करके exactly देखने देता है कि कौन से components render हुए, हर एक ने कितना समय लिया, और क्यों।

Note: एक focused, specific interaction record करें (random clicking around नहीं) ताकि resulting data interpret करना आसान हो।
Warning: Profiler एक browser extension feature है — यह इस code preview के अंदर live run होता demonstrate नहीं हो सकता, सिर्फ यहां describe किया जा सकता है।

Flame Graph पढ़ना

Profiler का flame graph हर component को एक colored bar के रूप में दिखाता है — wider/darker bars उन components को represent करते हैं जो render होने में ज़्यादा समय लेते हैं। एक specific render click करना (top पर एक numbered bar) आपको exactly देखने देता है कि उस particular update के दौरान कौन से components render हुए और क्यों।

Note: उन components के लिए unexpectedly wide bars देखें जिनसे आप इतना काम expect नहीं करते थे — यह अक्सर वहां है जहां एक real optimization opportunity hidden है।
Warning: Flame graph में एक component दिखना automatically मतलब नहीं है यह एक problem है — check करें यह कितना OFTEN render होता है और हर render में actually कितना LONG लेता है।

Production-Like Build के साथ Profiling करना

React का development build extra warnings और checks शामिल करता है जो इसे एक real production build से noticeably slower बनाते हैं। Accurate, real-world performance numbers के लिए, एक production build के against profile करें (या React का profiling build), default development server के against नहीं।

Note: ज़्यादातर bundlers (Vite, webpack via Create React App) specifically इस purpose के लिए एक profiling-enabled production bundle build करने का तरीका offer करते हैं।
Warning: Development-mode timings production से significantly slower हो सकती हैं, potentially आपको एक ऐसे problem के लिए optimize करा सकती हैं जो real, deployed app में actually exist नहीं करता।

उदाहरण: Building and Previewing Before Profiling

bash 
$ npm run build
vite v5.0.0 building for production...
✓ 34 modules transformed.

$ npm run preview
  ➜  Local:   http://localhost:4173/
# open React DevTools Profiler against this URL, not the dev server

⚠️ Run this in your own terminal or Node.js environment.

Related Topics

अनावश्यक Re-renders से बचना · Bundle Size का विश्लेषण · React.memo से Optimization · Image Optimization की Techniques

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. कौन से components slow हैं यह guess करना actually एक Profiler session record और पढ़ने के बजाय।
  2. Development mode में profile करना और मान लेना कि वही exact timings production पर apply होती हैं (development builds में extra checks शामिल हैं जो चीज़ें slow करते हैं)।
  3. किसी re-render के ACTUAL cause को इसे fix करने की कोशिश से पहले समझने के लिए 'Why did this render?' feature/flame graph उपयोग न करना।
चैप्टर सारांश
  • React DevTools का Profiler tab एक interaction के दौरान हर component के लिए render timings record करता है।
  • Flame graph यह visualize करता है कि कौन से components सबसे ज़्यादा समय लिए, और कितनी बार re-render हुए।
  • Actual real-world performance numbers check करते समय profiling एक production-like build के साथ होनी चाहिए।
  • Specific slow components target करने के लिए Profiler के data का उपयोग करें, guess करने के बजाय।
ब्राउज़र सपोर्ट

React DevTools extension React 16.5+ के लिए Profiler support करता है।

🔒

Chapter Quiz — Complete all 13 topics to unlock

0/13 topics done

Complete these topics first:

← Previous Lesson Avoiding Unnecessary Re-renders Next Lesson → Analyzing Bundle Size

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.