शीर्ष 40 रिएक्ट जेएस साक्षात्कार प्रश्न और उत्तर (2026)

द्वारा: जेम्स हार्टमैन जेम्स हार्टमैन
Hours Updated

क्या आप React JS इंटरव्यू की तैयारी कर रहे हैं? अब समय आ गया है कि आप जानें कि आपके लिए क्या इंतज़ार कर रहा है। समझ रिएक्ट जेएस साक्षात्कार प्रश्न यह आपकी वैचारिक स्पष्टता और वास्तविक दुनिया में कार्यान्वयन की ताकत दोनों को प्रकट करने में मदद करता है।

रिएक्ट जेएस तकनीकी अनुभव और क्षेत्र विशेषज्ञता वाले पेशेवरों के लिए अपार करियर के अवसर प्रदान करता है। चाहे आप नए हों या वरिष्ठ, जिनके पास 5 या 10 साल का पेशेवर अनुभव हो, विश्लेषणात्मक कौशल और तकनीकी विशेषज्ञता महत्वपूर्ण होती है। ये प्रश्न और उत्तर टीम लीडर्स, प्रबंधकों और डेवलपर्स को अपने कौशल को निखारने और शीर्ष साक्षात्कारों में सफल होने में मदद करते हैं।

नियुक्ति प्रबंधकों और तकनीकी नेताओं सहित 85 से अधिक पेशेवरों की अंतर्दृष्टि के आधार पर, यह संकलन विविध उद्योग अपेक्षाओं और विभिन्न क्षेत्रों में कार्यरत टीमों से एकत्रित वास्तविक साक्षात्कार पैटर्न को दर्शाता है।

रिएक्ट जेएस साक्षात्कार प्रश्न और उत्तर

शीर्ष रिएक्ट जेएस साक्षात्कार प्रश्न और उत्तर

1) वर्चुअल DOM की व्याख्या करें और बताएं कि रिएक्ट में रीकॉन्सिलिएशन कैसे काम करता है।

उत्तर:

वर्चुअल DOM, UI का एक इन-मेमोरी प्रतिनिधित्व है जिसे React, UI परिवर्तनों की कुशलतापूर्वक गणना करने के लिए बनाए रखता है। जब स्टेट या प्रॉप्स में परिवर्तन होता है, तो React एक नया वर्चुअल DOM ट्री रेंडर करता है, फिर एक रन करता है। अंतर पिछले ट्री के विरुद्ध एल्गोरिथ्म का उपयोग करके आवश्यक वास्तविक DOM ऑपरेशनों के न्यूनतम सेट की खोज की जाती है। इस प्रक्रिया को, सुलह, लेआउट थ्रैशिंग और महंगे ब्राउज़र रीफ़्लो को कम करता है। रिएक्ट असाइन करता है Instagram पर यह रेंडर में नोड्स का मिलान करने में मदद के लिए सूचियों में तत्वों को जोड़ता है, और यह नोड्स को अपडेट करने, पुनर्व्यवस्थित करने या हटाने का निर्णय लेने के लिए हेयुरिस्टिक्स (जैसे प्रकारों और कुंजियों की तुलना) का उपयोग करता है। इसके लाभों में पूर्वानुमानित अपडेट, बग्स के लिए छोटा सतह क्षेत्र और जटिल UI में बेहतर प्रदर्शन शामिल हैं।

उदाहरण:

चैट संदेशों की गतिशील सूची प्रस्तुत करना: स्थिर का उपयोग करके key मानों (संदेश आईडी) में, केवल नए संदेशों को DOM में जोड़ा जाता है जबकि मौजूदा नोड्स अछूते रहते हैं, जिससे अनावश्यक पुनः-रेंडर से बचा जा सकता है।

👉 निःशुल्क पीडीएफ डाउनलोड: रिएक्ट जेएस साक्षात्कार प्रश्न और उत्तर

2) रिएक्ट में विभिन्न प्रकार के घटक जीवनचक्र क्या हैं, और हुक्स उनसे कैसे मेल खाते हैं?

उत्तर:

रिएक्ट कंपोनेंट्स माउंटिंग, अपडेटिंग और अनमाउंटिंग चरणों से गुजरते हैं। क्लास कंपोनेंट्स में, लाइफसाइकल मेथड्स जैसे componentDidMount, shouldComponentUpdate, componentDidUpdate, तथा componentWillUnmount साइड इफेक्ट्स, रेंडरिंग निर्णय और सफाई को नियंत्रित करें। फ़ंक्शन घटकों में, कांटों समकक्ष क्षमताएं प्रदान करें: useEffect रेंडर के बाद प्रभावों को संभालता है; अंदर सफाई कार्य करता है useEffect अनमाउंट पर या अगले प्रभाव से पहले चलाएं; useMemo और useCallback मेमोइज़ेशन को नियंत्रित करें; और useRef रेंडर्स में परिवर्तनशील संदर्भों को बनाए रखता है। हुक्स के लाभों में संयोजनीयता, कम "this" बाइंडिंग समस्याएँ, और कस्टम हुक्स के माध्यम से तर्क का आसान पुन: उपयोग शामिल है, जबकि मुख्य नुकसान हुक्स के नियम और निर्भरता प्रबंधन सीखने की आवश्यकता है।

उदाहरण सहित उत्तर दें:

  • बढ़ते प्रभाव: useEffect(() => fetchData(), []).
  • अनमाउंट पर सफ़ाई: useEffect(() => { start(); return stop; }, []).

3) आप किसी रिएक्ट एप्लिकेशन के लिए क्लाइंट-साइड रेंडरिंग (सीएसआर), सर्वर-साइड रेंडरिंग (एसएसआर), स्टैटिक साइट जेनरेशन (एसएसजी) और इंक्रीमेंटल स्टैटिक रीजनरेशन (आईएसआर) के बीच कैसे निर्णय लेते हैं?

उत्तर:

रेंडरिंग रणनीति को उपयोगकर्ता अनुभव आवश्यकताओं, डेटा की ताजगी, एसईओ आवश्यकताओं, बुनियादी ढांचे की बाधाओं और विकास की गति द्वारा संचालित किया जाना चाहिए। सीएसआर प्रमाणीकरण के पीछे अत्यधिक इंटरैक्टिव ऐप्स के लिए उपयुक्त है जहां एसईओ गौण है। एसएसआर सार्वजनिक पृष्ठों के लिए वास्तविक डेटा के साथ फर्स्ट पेंट प्रदान करता है, जिससे टाइम टू फर्स्ट बाइट और SEO में सुधार होता है, लेकिन सर्वर लागत अधिक होती है। एसएसजी उत्कृष्ट गति के लिए निर्माण समय पर पृष्ठों की पूर्व गणना करता है और जब डेटा में कभी-कभार परिवर्तन होता है तो कैशिंग करता है। ISR माँग पर स्थिर पृष्ठों को क्रमिक रूप से अपडेट करता है, जिससे ताज़गी और प्रदर्शन का संतुलन बना रहता है। इसमें कैशेबिलिटी, वैयक्तिकरण, वैश्विक दर्शकों के लिए विलंबता और परिचालन जटिलता शामिल हैं।

तालिका: लाभ बनाम हानि

दृष्टिकोण फायदे नुकसान
सीएसआर सरल होस्टिंग, समृद्ध अन्तरक्रियाशीलता धीमा पहला पेंट, कमज़ोर SEO
एसएसआर बेहतरीन SEO, पहली बार लोड होने पर ताज़ा डेटा उच्च सर्वर लोड, जटिलता
एसएसजी तेज़, सस्ता, CDN-अनुकूल पुनर्निर्माण तक बासी सामग्री
ISR नियंत्रित ताज़गी के साथ तेज़ प्रबंधन हेतु अधिक गतिशील भाग

4) कौन सी राज्य प्रबंधन रणनीति का उपयोग किया जाना चाहिए: स्थानीय राज्य, संदर्भ, रेडक्स, या क्वेरी लाइब्रेरी?

उत्तर:

चुनना सबसे सरल उपकरण जो समस्या की विशेषताओं को संभालता है। घटक-स्थानीय स्थिति useState or useReducer पृथक UI चिंताओं के लिए आदर्श है। संदर्भ यह अधिकतर पढ़ने योग्य, अनुप्रयोग-व्यापी मानों (विषय, स्थान, वर्तमान उपयोगकर्ता) के लिए काम करता है, लेकिन बड़े वृक्षों में उच्च आवृत्ति अद्यतनों के लिए अनुकूलित नहीं है। Redux या इसी तरह के इवेंट-सोर्स्ड स्टोर तब उत्कृष्ट होते हैं जब आपको पूर्वानुमान, समय-यात्रा डिबगिंग, मिडलवेयर और सख्त यूनिडायरेक्शनल डेटा प्रवाह की आवश्यकता होती है। डेटा प्राप्त करने वाली लाइब्रेरी (उदाहरण के लिए, रिएक्ट क्वेरी-शैली पैटर्न) सर्वर स्थिति जीवनचक्र—कैशिंग, डीडुपिंग, रीफ़ेचिंग रणनीतियाँ और सिंक्रोनाइज़ेशन—को प्रबंधित करते हैं, जिससे बॉयलरप्लेट कम हो जाता है। एक व्यावहारिक आर्किटेक्चर अक्सर स्थानीय स्थिति + कॉन्फ़िगरेशन के लिए संदर्भ + सर्वर-स्थिति लाइब्रेरी, Redux को जटिल वर्कफ़्लो के लिए आरक्षित करना।

उदाहरण:

एक डैशबोर्ड API कैशिंग के लिए रिएक्ट क्वेरी, थीम के लिए संदर्भ और useReducer स्थानीय ईवेंट हैंडलिंग के लिए जटिल विजेट के अंदर।

5) useEffect और useLayoutEffect के बीच क्या अंतर है, और प्रत्येक कब लागू होता है?

उत्तर:

useEffect ब्राउज़र द्वारा पेंट किए जाने के बाद चलता है, जिससे यह डेटा प्राप्त करने, सदस्यता लेने और लॉगिंग जैसे गैर-अवरुद्ध कार्यों के लिए उपयुक्त हो जाता है। useLayoutEffect मार डाला DOM म्यूटेशन के बाद लेकिन पेंट से पहले सिंक्रोनस रूप से, माप और लेआउट समायोजन की अनुमति देता है जो बिना झिलमिलाहट के होना चाहिए (उदाहरण के लिए, तत्व आकार पढ़ना और शैलियों को सिंक्रोनस रूप से पुनः लागू करना)। useLayoutEffect इसका मतलब यह है कि ज़्यादा इस्तेमाल करने पर यह पेंटिंग में रुकावट पैदा कर सकता है और रिस्पॉन्सिविटी को नुकसान पहुँचा सकता है। एक अच्छा नियम यह है कि शुरुआत करें useEffect दुष्प्रभावों के लिए और तक पहुँचने के लिए useLayoutEffect केवल तभी जब आपको दृश्य शुद्धता सुनिश्चित करने के लिए लेआउट को मापना या समकालिक रूप से परिवर्तित करना आवश्यक हो।

उदाहरण सहित उत्तर दें:

  • useEffect: रेंडर के बाद उपयोगकर्ता प्रोफ़ाइल प्राप्त करें.
  • useLayoutEffect: पेंट करने से पहले टूलटिप का आकार मापें।

जल्दी तुलना

विशेषता उपयोग करें लेआउट प्रभाव का उपयोग करें
समय पेंट के बाद पेंट से पहले
उदाहरण डेटा, सदस्यताएँ मापन, समकालिक लेआउट सुधार
जोखिम यदि भारी हो तो मामूली झटका यदि भारी हो तो ब्लॉक पेंट

6) समझाइए कि सूचियों में कुंजियाँ कैसे काम करती हैं और सरणी सूचकांकों का उपयोग करने में क्या नुकसान हैं।

उत्तर:

कुंजियाँ React के सामंजस्य को रेंडर के बीच सूची आइटमों की सटीक पहचान करने में सक्षम बनाती हैं। स्थिर, अद्वितीय कुंजियाँ React को न्यूनतम DOM परिवर्तन के साथ आइटमों को पुनर्व्यवस्थित करने, सम्मिलित करने या हटाने की अनुमति देती हैं। सरणी सूचकांक जब आइटम्स को पुनर्व्यवस्थित, सम्मिलित या हटाया जा सकता है, तो कुंजियों के रूप में उपयोग करना समस्याग्रस्त होता है क्योंकि React पिछली स्थिति को गलत एलिमेंट से जोड़ सकता है, जिससे सूक्ष्म बग (उदाहरण के लिए, गलत इनपुट मान या एनिमेशन) उत्पन्न हो सकते हैं। सबसे अच्छा तरीका एक अपरिवर्तनीय, डोमेन-विशिष्ट पहचानकर्ता, जैसे कि डेटाबेस आईडी, का उपयोग करना है। यदि सूची वास्तव में स्थिर है और कभी पुनर्व्यवस्थित नहीं होती है, तो इंडेक्स स्वीकार्य हैं, लेकिन यह नियम के बजाय अपवाद है।

उदाहरण:

ड्रैग-एण्ड-ड्रॉप के दौरान घटक पहचान को सुरक्षित रखने के लिए ड्रैग करने योग्य कानबन बोर्ड को इंडेक्स का नहीं, बल्कि कार्ड आईडी का उपयोग करना चाहिए।

संबंधित आलेख

7) रिएक्ट में मेमोइज़ेशन तकनीकें कहां लागू होती हैं, और उनके फायदे और नुकसान क्या हैं?

उत्तर:

मेमोइज़ेशन अनावश्यक गणनाओं को कम करता है और इनपुट में कोई बदलाव न होने पर पिछले परिणामों का पुनः उपयोग करके री-रेंडरिंग को कम करता है। रिएक्ट में, React.memo घटक आउटपुट कैश करता है, useMemo महंगी गणनाओं को कैश करता है, और useCallback बच्चों को दिए गए फ़ंक्शन आइडेंटिटी को मेमोइज़ करता है। इसके मुख्य लाभ प्रदर्शन स्थिरता और भारी इंटरैक्शन के तहत कम CPU उपयोग हैं। नुकसानों में जटिलता, निर्भरताएँ गलत होने पर संभावित स्टेल-कैश बग और मेमोरी ओवरहेड शामिल हैं।

तालिका: मेमोइज़ करने के विभिन्न तरीके

प्रकार उद्देश्य विचार करने योग्य विशिष्ट कारक
React.memo(Component) यदि प्रॉप्स उथले-बराबर हों तो पुनः रेंडर करना छोड़ें प्रोप अस्थिरता, चाइल्ड कॉस्ट
useMemo(fn, deps) कैश परिकलित मान कंप्यूट बनाम मेमोरी की लागत
useCallback(fn, deps) स्थिर फ़ंक्शन पहचान निर्भरता शुद्धता

उदाहरण सहित उत्तर दें:

ग्रिड के लिए फ़िल्टर किए गए, सॉर्ट किए गए डेटासेट को मेमोइज़ करें useMemo, और सेल रेंडरर घटकों को इसके साथ लपेटें React.memo पुनः आने वाले तूफानों से बचने के लिए।

8) क्या आप फ़ॉर्म के लिए नियंत्रित या अनियंत्रित घटकों को प्राथमिकता देते हैं? फ़ॉर्म स्थिति के लाभ, हानि और प्रकारों पर चर्चा करें।

उत्तर:

नियंत्रित घटक इनपुट को रिएक्ट स्टेट से बाँधें value और onChange, सत्य के एकल स्रोत से प्राप्त सत्यापन, मास्किंग और सशर्त UI को सक्षम करना। इसके लाभ पूर्वानुमाननीयता और अन्य अवस्थाओं के साथ आसान एकीकरण हैं; नुकसानों में अनुकूलन के बिना प्रत्येक कीस्ट्रोक पर पुनः-रेंडर लागत शामिल है। अनियंत्रित घटक संदर्भों का उपयोग करते हुए, सत्य के स्रोत के रूप में DOM पर निर्भर रहें, जिससे बुनियादी फ़ॉर्म के लिए कम ओवरहेड और सरल वायरिंग मिलती है, लेकिन कम केंद्रीकृत सत्यापन होता है। जटिल वर्कफ़्लो के लिए, एक हाइब्रिड पैटर्न आम है, जिसमें महत्वपूर्ण फ़ील्ड के लिए नियंत्रित इनपुट और बड़े, टेक्स्ट-भारी क्षेत्रों के लिए अनियंत्रित इनपुट का उपयोग किया जाता है।

उदाहरण:

साइन-अप फॉर्म ईमेल और पासवर्ड सत्यापन के लिए नियंत्रित फ़ील्ड का उपयोग करता है, जबकि नोट्स टेक्स्टएरिया को पुनः-रेंडर ओवरहेड को कम करने के लिए अनियंत्रित किया जाता है।

9) आप संदर्भ बनाम कस्टम हुक का उपयोग कब करेंगे, और उनके बीच वैचारिक रूप से क्या अंतर है?

उत्तर:

संदर्भ एक परिवहन तंत्र कई घटकों की ज़रूरत वाले मानों के लिए, प्रॉप ड्रिलिंग से बचते हुए। यह स्वयं स्टेट का प्रबंधन नहीं करता; यह बस इसे वंशजों के लिए उजागर करता है। कस्टम हुक पुन: प्रयोज्य तर्क को समाहित करता है—स्थिति, प्रभाव और बाहरी सेवाओं का संयोजन—मान और फ़ंक्शन लौटाता है। साझा, पठन-अधिकतर कॉन्फ़िगरेशन प्रदान करने या स्टोर प्रदर्शित करने के लिए संदर्भ का उपयोग करें, और स्टोर के व्यवहार को लागू करने या प्रमाणीकरण, फ़ीचर फ़्लैग या डेटा फ़ेचिंग नीतियों जैसी चिंताओं को व्यवस्थित करने के लिए कस्टम हुक का उपयोग करें। ये दोनों पूरक हैं: एक सामान्य पैटर्न है useAuth() एक कस्टम हुक के रूप में समर्थित AuthContext.

उदाहरण सहित उत्तर दें:

AuthProvider संदर्भ के माध्यम से उपयोगकर्ता और टोकन की आपूर्ति करता है; useAuth लॉगिन, रिफ्रेश और लॉगआउट साइड इफेक्ट्स को संभालता है।

10) क्या आप बड़े रिएक्ट अनुप्रयोगों के लिए प्रदर्शन ट्यूनिंग रणनीतियों की रूपरेखा बता सकते हैं, जिसमें धीमी रेंडरिंग और जीवनचक्र हॉटस्पॉट की विशेषताएं शामिल हैं?

उत्तर:

प्रदर्शन ट्यूनिंग माप से शुरू होती है। रिएक्ट डेवटूल्स प्रोफाइलर और ब्राउज़र प्रदर्शन पैनल का उपयोग करके धीमे रास्तों की पहचान करें ताकि सुलह हॉट स्पॉट और महंगे कमिट्स का पता लगाया जा सके। रणनीतियों में शामिल हैं राज्य स्थानीयता (राज्य को अपने उपभोक्ताओं के निकट रखें), Memoization (React.memo, useMemo, useCallback), सूची वर्चुअलाइजेशन लंबी सूचियों के लिए, कोड विभाजन प्रारंभिक बंडल को कम करने के लिए आलसी लोडिंग के साथ, और डिबाउंसिंग या थ्रॉटलिंग उच्च-आवृत्ति घटनाएँ। सर्वर-समर्थित डेटा के लिए, क्वेरी लाइब्रेरी के साथ कैशिंग अपनाएँ और रहस्य-अनुकूल सुचारू लोडिंग के लिए पैटर्न। जीवनचक्र हॉटस्पॉट पर ध्यान दें, जैसे कि व्यापक निर्भरता सरणियों के कारण बार-बार चलने वाले प्रभाव, या बार-बार बदलते संदर्भ मानों के कारण पुन: रेंडर होने वाले घटक।

उदाहरण सहित उत्तर दें:

विंडोइंग लाइब्रेरी का उपयोग करके 10,000-पंक्ति वाली तालिका को वर्चुअलाइज करें; प्रारंभिक पेंट को बेहतर बनाने के लिए रूट-आधारित कोड विभाजन के पीछे भारी चार्ट को आलसी-लोड करें।

11) रिएक्ट में प्रॉप्स और स्टेट में क्या अंतर है?

उत्तर:

दोनों props और state घटकों के प्रस्तुतीकरण पर प्रभाव पड़ता है, लेकिन उनका उद्देश्य और जीवनचक्र मौलिक रूप से भिन्न होता है। रंगमंच की सामग्री (प्रॉपर्टीज़ का संक्षिप्त रूप) अपरिवर्तनीय इनपुट होते हैं जो पैरेंट से चाइल्ड कंपोनेंट को भेजे जाते हैं, जो रेंडरिंग के लिए कॉन्फ़िगरेशन या डेटा को परिभाषित करते हैं। ये प्रवाहित होते हैं नीचे रिएक्ट के यूनिडायरेक्शनल डेटा प्रवाह में और इसे प्राप्त करने वाले घटक द्वारा कभी भी संशोधित नहीं किया जाना चाहिए। राज्यदूसरी ओर, यह परिवर्तनशील है और घटक द्वारा आंतरिक रूप से प्रबंधित किया जाता है। यह गतिशील व्यवहार निर्धारित करता है जो समय के साथ बदलता रहता है, जैसे फ़ॉर्म इनपुट मान या टॉगल की गई दृश्यता।

मुख्य अंतर तालिका:

फ़ैक्टर रंगमंच की सामग्री राज्य
अस्थिरता अडिग परिवर्तनशील
स्वामित्व माता-पिता द्वारा पारित घटक के स्वामित्व में
अद्यतन विधि पैरेंट री-रेंडर useState or setState
उदाहरण विन्यास गतिशील UI परिवर्तन
जीवन चक्र रेंडर के दौरान मौजूद बनी रहती है, पुनः रेंडर ट्रिगर करती है

उदाहरण:

A <Button color="blue" /> रंग तय करने के लिए प्रॉप्स का उपयोग करता है, जबकि clicked बूलियन अपनी स्थिति में दृश्य फीडबैक को टॉगल करता है।

12) रिएक्ट में घटक आर्किटेक्चर पैटर्न और घटकों को वर्गीकृत करने के विभिन्न तरीकों की व्याख्या करें।

उत्तर:

रिएक्ट एप्लिकेशन निम्न का अनुसरण करते हैं घटक-आधारित वास्तुकलायूआई को छोटे, पुनःप्रयोग योग्य बिल्डिंग ब्लॉक्स में तोड़ना। घटकों को उनके आधार पर वर्गीकृत किया जा सकता है उद्देश्य और जिम्मेदारी:

  1. प्रस्तुतिकरण (मूर्ख) घटक - यूआई पर ध्यान केंद्रित करें, प्रॉप्स के माध्यम से डेटा प्राप्त करें, और शायद ही कभी स्थिति का प्रबंधन करें।
  2. कंटेनर (स्मार्ट) घटक - तर्क को संभालना, डेटा प्राप्त करना, और स्थिति का प्रबंधन करना; वे प्रस्तुति घटकों को प्रस्तुत करते हैं।
  3. उच्च-क्रम घटक (HOCs) - फ़ंक्शन जो एक घटक लेते हैं और अतिरिक्त व्यवहार के साथ एक उन्नत संस्करण लौटाते हैं।
  4. शुद्ध घटक - प्रॉप्स और स्थिति की तुलनात्मक रूप से तुलना करके प्रदर्शन को अनुकूलित करें।
  5. कार्यात्मक बनाम वर्ग घटक - कार्यात्मक घटकों (हुक के साथ) को अब पठनीयता और प्रदर्शन के लिए प्राथमिकता दी जाती है।

उदाहरण:

A <UserProfile /> घटक प्रस्तुतिकरणात्मक हो सकता है, उपयोगकर्ता जानकारी प्राप्त कर सकता है, जबकि <UserProfileContainer /> डेटा प्राप्त करता है और उसके जीवनचक्र का प्रबंधन करता है।

13) रिएक्ट त्रुटि सीमाओं को कैसे संभालता है, और वे महत्वपूर्ण क्यों हैं?

उत्तर:

त्रुटि सीमाएँ विशेष रिएक्ट घटक हैं जो पकड़ते हैं Javaरेंडरिंग, लाइफसाइकल मेथड्स या कंस्ट्रक्टर्स के दौरान उनके चाइल्ड कंपोनेंट ट्री में कहीं भी स्क्रिप्ट एरर। ये विफलताओं को विशिष्ट सबट्रीज़ में अलग करके पूरे ऐप को क्रैश होने से रोकते हैं। आप इन्हें लागू करने के लिए इनका उपयोग कर सकते हैं componentDidCatch(error, info) और static getDerivedStateFromError() एक वर्ग घटक में.

लाभ:

  • फ़ॉलबैक UIs दिखाकर UI स्थिरता बनाए रखें.
  • विश्लेषण के लिए त्रुटियों को कैप्चर करें और लॉग करें.
  • कैस्केडिंग अनमाउंट को रोकें.

उदाहरण:

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}

14) रिएक्ट फ्रेग्मेंट क्या हैं और वे रैपर से कैसे भिन्न हैं? तत्व?

उत्तर:

प्रतिक्रिया टुकड़े (<></>) आपको DOM में अतिरिक्त नोड्स जोड़े बिना कई तत्वों को समूहीकृत करने देता है। यह साफ़ संरचना के लिए ज़रूरी है, खासकर सूचियों, तालिकाओं और सिमेंटिक HTML में, जहाँ अतिरिक्त रैपर लेआउट या पहुँच संबंधी समस्याएँ पैदा कर सकते हैं। रैपर के विपरीत, <div>s, फ़्रैगमेंट्स को DOM में रेंडर नहीं किया जाता है और इसलिए उनके प्रदर्शन और अर्थ संबंधी लाभ होते हैं।

उदाहरण:

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

अंतर तालिका:

फ़ैक्टर टुकड़ा <div> आवरण
DOM आउटपुट कोई नहीं अतिरिक्त नोड जोड़ता है
उदाहरण संरचनात्मक समूहीकरण स्टाइलिंग या लेआउट
प्रदर्शन बेहतर थोड़ा ओवरहेड

15) प्रदर्शन अनुकूलन के लिए आप किस रिएक्ट हुक का उपयोग करेंगे और क्यों?

उत्तर:

प्रदर्शन-संवेदनशील रिएक्ट घटक अक्सर इस पर निर्भर करते हैं मेमोइज़ेशन हुक और धीरे लोड हो रहा है अनावश्यक काम को कम करने के लिए। आम हुक में शामिल हैं:

  • useMemo → कम्प्यूटेशनल रूप से महंगे परिणामों को कैश करता है।
  • useCallback → फ़ंक्शन पहचान परिवर्तनों के कारण अनावश्यक चाइल्ड रेंडरिंग को रोकता है।
  • useTransition → अधिक सुचारू UI के लिए गैर-जरूरी अपडेट को स्थगित करता है।
  • useDeferredValue → भारी गणनाओं को तत्काल अंतःक्रिया के बाद तक विलंबित करता है।

उदाहरण:

एक बड़े डेटा ग्रिड का उपयोग useMemo फ़िल्टर किए गए परिणामों के लिए CPU खपत को 50% या उससे अधिक तक कम किया जा सकता है।

लाभ:

  • व्यर्थ रेंडर को कम करता है.
  • लोड के अंतर्गत UI को प्रतिक्रियाशील बनाए रखता है।

हानि:

  • निर्भरता परिशुद्धता की आवश्यकता होती है; गलत तरीके से प्रबंधित होने पर पुराने कैश बग उत्पन्न हो सकते हैं।

16) रिएक्ट पोर्टल क्या हैं और उनके क्या फायदे हैं?

उत्तर:

पोर्टल React घटकों को उनके पैरेंट पदानुक्रम के बाहर एक DOM नोड में बच्चों को रेंडर करने की अनुमति देता है, आमतौर पर मोडल्स, टूलटिप्स या ड्रॉपडाउन के लिए जिन्हें ओवरफ़्लो या स्टैकिंग संदर्भों से विज़ुअल रूप से "बचना" पड़ता है। ReactDOM.createPortal(child, container), वे इवेंट बबलिंग स्थिरता बनाए रखते हैं, इसलिए इवेंट हैंडलर इस तरह काम करते हैं जैसे कि तत्व अपने मूल पदानुक्रम के अंदर ही रहता है।

लाभ तालिका:

फायदा विवरण
संरचनात्मक स्वतंत्रता पैरेंट ट्री के बाहर रेंडर करें
CSS/स्टैकिंग नियंत्रण से बचें overflow: hidden या z-इंडेक्स समस्याएँ
घटना प्रसार रिएक्ट के सिंथेटिक इवेंट अभी भी सही ढंग से बबल करते हैं
रेस की क्षमता वैश्विक ओवरले के लिए आदर्श

उदाहरण:

createPortal(<ModalContent />, document.getElementById('modal-root'));

17) बताएं कि रिएक्ट राउटर पृष्ठों के बीच नेविगेशन और स्थिति का प्रबंधन कैसे करता है।

उत्तर:

रिएक्ट राउटर एक घोषणात्मक रूटिंग लाइब्रेरी है जो UI को ब्राउज़र के URL के साथ सिंक्रोनाइज़ करती है। यह इतिहास एपीआई पूरे पृष्ठ को पुनः लोड किए बिना सत्र इतिहास में हेरफेर करने के लिए। मुख्य अवधारणाओं में शामिल हैं मार्गों, लिंक, तथा निर्गम नेस्टेड रूटिंग के लिए। लाइब्रेरी समर्थन करती है गतिशील मार्ग, URL पैरामीटर, तथा नेविगेशन हुक (useNavigate, useParams, useLocation) रिएक्ट राउटर v6 ने इसके लिए एक सरलीकृत सिंटैक्स और डेटा API पेश किया है लोडर और कार्य कार्यों में सुधार, एसएसआर एकीकरण और राज्य प्रबंधन में सुधार।

उदाहरण:

<Route path="/user/:id" element={<UserProfile />} />

लाभ:

  • एकल-पृष्ठ नेविगेशन सक्षम करता है.
  • स्क्रॉल स्थिति और इतिहास बनाए रखता है.
  • बेहतर प्रदर्शन के लिए आलसी लोडिंग के साथ साफ-सुथरे ढंग से एकीकृत करता है।

18) रिएक्ट एप्लिकेशन में साइड इफेक्ट्स को संभालने के विभिन्न तरीके क्या हैं?

उत्तर:

साइड इफ़ेक्ट उन क्रियाओं को कहते हैं जो किसी घटक के दायरे से बाहर किसी चीज़ को प्रभावित करती हैं (API कॉल, DOM मैनिपुलेशन, सब्सक्रिप्शन)। मुख्य उपकरण इस प्रकार हैं:

  1. useEffect रेंडर के बाद क्लाइंट-साइड प्रभाव के लिए।
  2. इवेंट हैंडलर उपयोगकर्ता-संचालित प्रभावों के लिए.
  3. कस्टम हुक प्रभाव तर्क का पुनः उपयोग करने के लिए (उदाहरण के लिए, useFetch).
  4. middleware (जैसे रेडक्स सागा या थंक) जटिल एसिंक्रोनस ऑर्केस्ट्रेशन के लिए।
  5. रिएक्ट क्वेरी या SWR सर्वर स्थिति और रीफ़ेच जीवनचक्र को स्वचालित रूप से प्रबंधित करने के लिए।

उदाहरण:

A useEffect माउंट पर एक बार डेटा प्राप्त करता है:

useEffect(() => { fetchData(); }, []);

लाभ:

सरलीकृत एसिंक्रोनस प्रबंधन, बेहतर एनकैप्सुलेशन, और स्पष्ट जीवनचक्र नियंत्रण।

19) क्या रिएक्ट एक फ्रेमवर्क है या लाइब्रेरी? उन कारकों पर चर्चा करें जो इनके बीच अंतर को परिभाषित करते हैं।

उत्तर:

प्रतिक्रिया आधिकारिक तौर पर एक है पुस्तकालययह एक पूर्ण रूपरेखा नहीं है। यह पूरी तरह से दृश्य परत, रूटिंग, डेटा फ़ेचिंग या बिल्ड संरचना को लागू किए बिना रेंडरिंग, स्थिति और घटक अमूर्तता प्रदान करना।

तुलना तालिका:

फ़ैक्टर लाइब्रेरी (रिएक्ट) फ्रेमवर्क (एंगुलर, व्यू)
विस्तार रेंडरिंग देखें पूर्ण MVC वास्तुकला
स्वच्छंद निम्न हाई
नियंत्रण डेवलपर-संचालित फ्रेमवर्क-संचालित
लचीलापन हाई परंपराओं द्वारा सीमित
सीखने की अवस्था मध्यम जटिलता के कारण उच्चतर

रिएक्ट का पारिस्थितिकी तंत्र (रेडक्स, राउटर, क्वेरी, नेक्स्ट.जेएस) प्रभावी रूप से एक "मेटा-फ्रेमवर्क" बनाता है, जो मॉड्यूलर संयोजन क्षमता प्रदान करता है जो डेवलपर्स को अपनी स्वयं की वास्तुकला बनाने की अनुमति देता है।

20) आपको React.lazy और Suspense का उपयोग कब करना चाहिए, और उनके क्या फायदे हैं?

उत्तर:

React.lazy सक्षम बनाता है कोड विभाजन केवल आवश्यकता पड़ने पर ही घटकों को गतिशील रूप से लोड करके, जबकि Suspense घटक तैयार होने तक एक फ़ॉलबैक UI प्रदान करता है। यह संयोजन प्रारंभिक लोड प्रदर्शन और उपयोगकर्ता-अनुभूत प्रतिक्रियाशीलता में सुधार करता है।

उदाहरण:

const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
  <Chart />
</Suspense>

लाभ तालिका:

फायदा व्याख्या
प्रदर्शन मांग पर कोड लोड करता है
उपयोगकर्ता अनुभव सुंदर लोडिंग फ़ॉलबैक
बंडल का आकार छोटा प्रारंभिक बंडल
सादगी नेटिव रिएक्ट API, न्यूनतम सेटअप

सर्वोत्तम प्रथाएं:

  • एकाधिक आलसी घटकों को एक सस्पेंस सीमा में लपेटें।
  • सुगम्यता के लिए सार्थक फ़ॉलबैक संकेतकों का उपयोग करें।

21) रिएक्ट सर्वर कंपोनेंट्स (RSCs) क्या हैं और उनके क्या फायदे हैं, समझाइए।

उत्तर:

रिएक्ट सर्वर कंपोनेंट्स (RSCs) एक प्रमुख नवाचार है जिसे घटकों को अनुमति देकर प्रदर्शन और डेवलपर अनुभव को बढ़ाने के लिए पेश किया गया है बिना भेजे सर्वर पर रेंडर करें Javaक्लाइंट के लिए स्क्रिप्टवे पूरी तरह से सर्वर पर निष्पादित होते हैं, डेटा प्राप्त करते हैं, डेटाबेस से पढ़ते हैं, या क्लाइंट को क्रमबद्ध आउटपुट स्ट्रीम करने से पहले सुरक्षित रूप से I/O ऑपरेशन करते हैं।

लाभ:

  • छोटे बंडल आकार — केवल सर्वर तर्क के लिए कोई क्लाइंट JS नहीं।
  • अच्छा प्रदर्शन — सर्वर-साइड डेटा फ़ेचिंग से वॉटरफ़ॉल्स कम हो जाते हैं।
  • सुरक्षा — संवेदनशील कोड कभी भी ब्राउज़र तक नहीं पहुंचता।
  • बेहतर कैशिंग — सर्वर घटक किनारे पर कैश करने योग्य हैं।

उदाहरण:

A <ProductList /> सर्वर घटक सीधे डेटाबेस से डेटा प्राप्त कर सकता है और परिणामों को पास कर सकता है <ProductCard /> ग्राहक घटक.

22) रिएक्ट हाइड्रेशन और रिकंसिलिएशन में क्या अंतर है?

उत्तर:

यद्यपि दोनों शब्दों में रिएक्ट द्वारा UI को अद्यतन करना शामिल है, लेकिन उनका उद्देश्य अलग-अलग है:

  • सुलह यह DOM अद्यतनों के न्यूनतम सेट को निर्धारित करने के लिए वर्चुअल DOM ट्री की उसके पिछले संस्करण के साथ तुलना करने की प्रक्रिया है।
  • जल - योजनदूसरी ओर, रिएक्ट के इवेंट श्रोताओं और आंतरिक संरचनाओं को जोड़ने की प्रक्रिया है सर्वर-रेंडर किए गए HTML क्लाइंट साइड पर, स्थैतिक मार्कअप को पूरी तरह से इंटरैक्टिव ऐप में बदलना।

तुलना तालिका:

फ़ैक्टर सुलह जल - योजन
ट्रिगर क्लाइंट पुनः-रेंडर प्रारंभिक पृष्ठ लोड (SSR)
उद्देश्य DOM को कुशलतापूर्वक अपडेट करें SSR HTML को इंटरैक्टिव बनाएं
विस्तार वर्चुअल DOM डिफ़रिंग इवेंट बाइंडिंग + स्थिति पुनः संलग्न
आवृत्ति कई बार SSR रेंडर के बाद एक बार

उदाहरण:

Next.js ऐप द्वारा प्री-रेंडर किए गए HTML भेजने के बाद, React हाइड्रेट्स इससे घटक सब कुछ पुनः प्रस्तुत किए बिना घटनाओं पर प्रतिक्रिया देते हैं।

23) समवर्ती रेंडरिंग रिएक्ट 18+ में उपयोगकर्ता अनुभव को कैसे बेहतर बनाता है?

उत्तर:

समवर्ती रेंडरिंग, React को उपयोगकर्ता की प्राथमिकता के आधार पर रेंडरिंग कार्य को बाधित, रोकने या फिर से शुरू करने की अनुमति देता है। यह भारी गणनाओं या पुनः-रेंडरिंग के दौरान UI को फ़्रीज़ होने से रोकता है। जैसे फ़ीचर useTransition और useDeferredValue इस क्षमता का लाभ उठाकर अलग करें तत्काल अपडेट (टाइपिंग की तरह) गैर जरूरी (जैसे फ़िल्टरिंग)।

लाभ:

  • सहज, प्रतिक्रियाशील अंतःक्रियाएँ।
  • मुख्य थ्रेड को अवरुद्ध होने से बचाने के लिए टाइम-स्लाइसिंग।
  • बेहतर UX के लिए पूर्वानुमानित प्राथमिकता।

उदाहरण:

const [isPending, startTransition] = useTransition();
startTransition(() => setFilteredList(filter(items, term)));

यहां, बड़े डेटासेट को फ़िल्टर करते समय भी टाइपिंग तरल बनी रहती है क्योंकि रिएक्ट गैर-जरूरी अपडेट को समवर्ती रूप से शेड्यूल करता है।

24) रिएक्ट एप्लिकेशन में परीक्षण करने के विभिन्न तरीके क्या हैं?

उत्तर:

रिएक्ट परीक्षण को निम्न में वर्गीकृत किया जा सकता है इकाई, एकीकरण, तथा शुरू से अंत तक पहचानने में सक्षम होना चाहिए।

परीक्षण विधि तालिका:

प्रकार उपकरण उद्देश्य
इकाई है पृथक फ़ंक्शन/घटकों का परीक्षण करें
एकीकरण रिएक्ट टेस्टिंग लाइब्रेरी UI इंटरैक्शन और स्थिति परिवर्तनों का परीक्षण करें
E2E Cypress / नाटककार वास्तविक ब्राउज़रों में उपयोगकर्ता प्रवाह का परीक्षण करें

सर्वोत्तम प्रथाएं:

  • पसंद करते हैं रिएक्ट टेस्टिंग लाइब्रेरी एंजाइम (आधुनिक, DOM-उन्मुख) पर।
  • नकली API का उपयोग करना msw (नकली सेवा कार्यकर्ता).
  • कार्यान्वयन विवरणों का परीक्षण करने से बचें - व्यवहार पर ध्यान केंद्रित करें।

उदाहरण:

test('renders user name', () => {
  render(<User name="Alice" />);
  expect(screen.getByText(/Alice/)).toBeInTheDocument();
});

25) रिएक्ट के साथ कौन से बिल्ड टूल और बंडलर्स का सबसे अधिक उपयोग किया जाता है, और उनके बीच क्या अंतर हैं?

उत्तर:

रिएक्ट कई बंडलर्स और कंपाइलर्स के साथ एकीकृत हो सकता है, जिनमें से प्रत्येक को अलग-अलग उपयोग के मामलों के लिए अनुकूलित किया गया है।

तुलना तालिका:

उपकरण विशेषताएँ फायदे नुकसान
webpack अत्यधिक विन्यास योग्य परिपक्व, प्लगइन-समृद्ध जटिल सेटअप
रहता है ईएसएम-आधारित, बिजली की गति से चलने वाला डेव सर्वर तत्काल HMR, आधुनिक वाक्यविन्यास सीमित विरासत प्लगइन समर्थन
पार्सल शून्य-कॉन्फ़िगरेशन ऑटो-ऑप्टिमाइज़ेशन Less लचीला
एस्बिल्ड गो-आधारित कंपाइलर बहुत ज़्यादा तेज़ कम पारिस्थितिकी तंत्र प्लगइन्स

उदाहरण:

आधुनिक परियोजनाएं अक्सर अपनाती हैं रहता है विकास की गति और एस्बिल्ड कुशल उत्पादन निर्माण के लिए CI/CD पाइपलाइनों में।

26) Next.js रिएक्ट की क्षमताओं को कैसे बढ़ाता है?

उत्तर:

Next.js एक है रिएक्ट फ्रेमवर्क रूटिंग, एसएसआर और स्टैटिक जेनरेशन के लिए एक सुविचारित आर्किटेक्चर प्रदान करता है। यह हाइब्रिड रेंडरिंग मॉडल, एपीआई रूट और एज-रेडी डिप्लॉयमेंट सुविधाएँ प्रस्तुत करता है।

लाभ:

  • अन्तर्निर्मित में एसएसआर/एसएसजी/आईएसआर समर्थन करें.
  • ऐप राउटर रिएक्ट सर्वर घटकों के साथ.
  • छवि अनुकूलन और मिडलवेयर प्रदर्शन और सुरक्षा के लिए.
  • सर्वर रहित कार्यों के लिए आसान API मार्ग.

उदाहरण:

app/page.js एसएसआर-रेंडर किए गए पृष्ठों के लिए; app/api/route.js सर्वर एंडपॉइंट के लिए.

सारांश मेंNext.js न्यूनतम कॉन्फ़िगरेशन के साथ प्रोडक्शन-ग्रेड रिएक्ट ऐप्स को सक्षम बनाता है।

27) रिएक्ट में कुछ सामान्य प्रदर्शन संबंधी खामियां क्या हैं, और आप उनसे कैसे बच सकते हैं?

उत्तर:

रिएक्ट के प्रदर्शन में आम खामियां निम्नलिखित हैं:

  1. अनावश्यक पुनः-रेंडर — का उपयोग करके ठीक करें React.memo या घटकों को विभाजित करना।
  2. इनलाइन ऑब्जेक्ट/सरणी निर्माण - उपयोग useMemo स्थिर संदर्भों के लिए.
  3. बड़ी सूचियाँ — विंडोइंग लागू करें (react-window, react-virtualized).
  4. भारी गणनाएँ — मेमोइज़ करें या वेब वर्कर्स पर ऑफलोड करें।
  5. संदर्भ का अति प्रयोग — लगातार अपडेट गहराई से प्रसारित होते हैं; व्युत्पन्न स्थिति को प्राथमिकता देते हैं।

उदाहरण:

अगर आप पास हो गए { a: 1 } मेमोइज़्ड कंपोनेंट में इनलाइन होने पर, यह प्रत्येक पैरेंट रेंडर पर पुनः रेंडर होता है। ऑब्जेक्ट को मेमोइज़ करके इसे ठीक करें।

प्रदर्शन टिप तालिका:

मुद्दा अनुकूलन तकनीक
फिर से renders React.memo, useCallback
महंगी गणनाएँ useMemo, वेब वर्कर्स
बड़े डेटा सेट वर्चुअलाइजेशन
लगातार संदर्भ अद्यतन स्थानीयकृत स्थिति

28) useReducer और useState के बीच अंतर स्पष्ट करें।

उत्तर:

दोनों हुक्स स्थिति का प्रबंधन करते हैं, लेकिन वे जटिलता और नियंत्रण में भिन्न हैं।

  • useState सरल, पृथक राज्य संक्रमण के लिए आदर्श है।
  • useReducer जटिल राज्य तर्क को केंद्रीकृत करता है रिड्यूसर फ़ंक्शन, का उपयोग करते हुए dispatch पूर्वानुमानित अद्यतनों के लिए क्रियाएँ।

तुलना तालिका:

फ़ैक्टर उपयोग करें उपयोगरिड्यूसर
वाक्य - विन्यास [value, setValue] [state, dispatch]
जटिलता सरल मध्यम से जटिल
उदाहरण स्वतंत्र राज्य संबंधित या नेस्टेड स्थितियाँ
डीबगिंग Less वाचाल लॉग की गई क्रियाओं के माध्यम से आसान
उदाहरण फ़ॉर्म टॉगल फ़ॉर्म सत्यापन या बहु-चरणीय फ़ॉर्म

उदाहरण:

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

29) आप रिएक्ट एप्लिकेशन में एक्सेसिबिलिटी (a11y) कैसे सुधार सकते हैं?

उत्तर:

एक्सेसिबिलिटी सुनिश्चित करती है कि सभी उपयोगकर्ता, जिनमें विकलांग उपयोगकर्ता भी शामिल हैं, आपके ऐप का प्रभावी ढंग से उपयोग कर सकें। रिएक्ट सिमेंटिक मार्कअप और ARIA विशेषताओं के माध्यम से एक्सेसिबिलिटी को सुगम बनाता है।

सर्वोत्तम प्रथाएं:

  • उपयोग अर्थपूर्ण HTML (<button> vs <div onClick>).
  • फ़ोकस प्रबंधित करें ref और tabIndex.
  • गतिशील घटकों के लिए ARIA भूमिकाओं का उपयोग करें.
  • छवियों के लिए रंग कंट्रास्ट और पाठ विकल्प सुनिश्चित करें।
  • जैसे उपकरणों का लाभ उठाएँ eslint-प्लगइन-jsx-a11y और कुल्हाड़ी-कोर ऑडिट के लिए.

उदाहरण:

<button aria-label="Close dialog" onClick={closeModal}>×</button>

लाभ:

  • व्यापक दर्शक वर्ग तक पहुंच।
  • एसईओ सुधार.
  • WCAG मानकों का अनुपालन।

30) क्या आप बता सकते हैं कि कोड विभाजन और आलसी लोडिंग में क्या अंतर है, और प्रत्येक का उपयोग कब करना चाहिए?

उत्तर:

दोनों तकनीकें बंडल आकार और लोड प्रदर्शन को अनुकूलित करती हैं लेकिन इनमें भिन्नता होती है निष्पादन समय.

  • कोड विभाजन बड़े बंडलों को छोटे टुकड़ों में विभाजित करता है जिन्हें स्वतंत्र रूप से लोड किया जा सकता है।
  • धीरे लोड हो रहा है जब तक उनकी आवश्यकता न हो, तब तक उन खंडों को लोड करने में देरी होती है।

तुलना तालिका:

फ़ैक्टर कोड विभाजन आलसी लोड हो रहा है
परिभाषा कोड को खंडों में विभाजित करता है मांग पर खंड लोड करता है
उपकरण वेबपैक, वाइट React.lazy, गतिशील import()
उद्देश्य बंडल आकार अनुकूलित करें रनटाइम प्रदर्शन में सुधार
निष्पादन निर्माण-समय क्रम

उदाहरण:

const Settings = React.lazy(() => import('./Settings'));

एक साथ उपयोग किए जाने पर, ये तकनीकें इंटरएक्टिव होने में लगने वाले समय को कम करती हैं और बड़े ऐप्स की गति को बढ़ाती हैं।

31) रेंडर प्रॉप्स की अवधारणा को समझाइए और यह हायर-ऑर्डर कंपोनेंट्स (HOCs) से किस प्रकार भिन्न है।

उत्तर:

रेंडर प्रॉप्स रिएक्ट में एक पैटर्न है जहां एक घटक स्वीकार करता है एक सहारा के रूप में कार्य करें जो उसे बताता है कि क्या रेंडर करना है। इससे घटक तर्क को बिना दोहराव के कई घटकों के बीच साझा किया जा सकता है।

दूसरी ओर, एचओसी लपेटो एक घटक और इंजेक्ट किए गए प्रॉप्स या व्यवहारों के साथ एक उन्नत संस्करण लौटाएं।

तुलना तालिका:

फ़ैक्टर रेंडर प्रॉप्स अस्थायी
कार्यान्वयन बच्चे की तरह कार्य करें फ़ंक्शन रैपिंग घटक
रचना इनलाइन नियंत्रण घोषणात्मक आवरण
पठनीयता अक्सर स्पष्ट रैपर नरक का कारण बन सकता है
उदाहरण गतिशील रेंडरिंग तर्क फिल्म आदि में दृश्यों के संपादन संबंधी चिंताएं

उदाहरण:

<DataProvider render={data => <UserList users={data} />} />

रेंडर प्रॉप्स बेहतर लचीलापन प्रदान करते हैं और HOCs में आम तौर पर होने वाले नाम टकराव से बचते हैं।

32) कस्टम हुक के विभिन्न प्रकार और उनके फायदे क्या हैं?

उत्तर:

कस्टम हुक्स, स्टेट, साइड इफेक्ट्स और यूटिलिटीज़ को मिलाकर पुन: प्रयोज्य लॉजिक को समाहित करते हैं। ये कोड की पुन: प्रयोज्यता, चिंताओं के पृथक्करण और परीक्षण योग्यता में सुधार करते हैं।

प्रकार एवं उदाहरण:

  1. राज्य प्रबंधन हुक - useToggle, useForm.
  2. डेटा प्राप्त करने के हुक - useFetch, useQuery.
  3. UI/UX हुक - useWindowSize, useDarkMode.
  4. एकीकरण हुक - useLocalStorage, useMediaQuery.
  5. प्रदर्शन हुक - useDebounce, useThrottle.

लाभ:

  • केंद्रीकृत तर्क पुन: उपयोग.
  • स्वच्छ घटक.
  • स्वतंत्र परीक्षण.

उदाहरण:

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) || initial);
  useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value]);
  return [value, setValue];
}

33) आप रिएक्ट अनुप्रयोगों में मेमोरी लीक को कैसे संभालते हैं?

उत्तर:

मेमोरी लीक तब होती है जब अनमाउंट किए गए कंपोनेंट्स में अभी भी संसाधनों या सब्सक्रिप्शन के संदर्भ मौजूद होते हैं। ये प्रदर्शन को कम करते हैं और अप्रत्याशित व्यवहार का कारण बनते हैं।

रोकथाम तकनीकें:

  1. सफाई प्रभाव in useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []);
  2. अतुल्यकालिक कॉल निरस्त करें का उपयोग AbortController.
  3. पुराने क्लोजर को बरकरार रखने से बचें पुराने प्रॉप्स/स्थिति का संदर्भ देना।
  4. इवेंट या सॉकेट से सदस्यता समाप्त करें अनमाउंट पर.
  5. रिएक्ट प्रोफाइलर का उपयोग करें धीमी स्मृति वृद्धि का पता लगाने के लिए।

उदाहरण:

चैट ऐप में, जब कोई उपयोगकर्ता चैट रूम से बाहर जाता है तो सॉकेट श्रोताओं को हमेशा डिस्कनेक्ट कर दें।

34) बड़े रिएक्ट अनुप्रयोगों में फॉर्म प्रबंधन के लिए सर्वोत्तम अभ्यास क्या हैं?

उत्तर:

एंटरप्राइज़-स्तरीय रिएक्ट ऐप्स में फ़ॉर्म प्रबंधित करने के लिए नियंत्रण, प्रदर्शन और रखरखाव के बीच संतुलन की आवश्यकता होती है।

सर्वोत्तम प्रथाएं:

  • जैसे पुस्तकालयों का उपयोग करें फॉर्मिक, रिएक्ट हुक फॉर्मया, अंतिम फॉर्म सत्यापन और क्षेत्र पंजीकरण के लिए।
  • नेस्टेड घटकों या संदर्भों का उपयोग करके संबंधित फ़ील्ड को समूहीकृत करें.
  • लागू करें स्कीमा सत्यापन (हाँ, ज़ोड) स्थिरता के लिए।
  • भारी सत्यापन या API जांच को रद्द करें।
  • जब तक वैश्विक स्तर पर आवश्यकता न हो, फॉर्म स्थिति को स्थानीयकृत रखें।

उदाहरण:

रिएक्ट हुक फॉर्म इनपुट स्थिति को अलग करके पुनः-रेंडर को न्यूनतम करता है।

const { register, handleSubmit } = useForm(); 
<input {...register('email', { required: true })} />

35) रिएक्ट डेवलपमेंट में कौन से डिज़ाइन पैटर्न सबसे उपयोगी हैं, और उनकी विशेषताएं क्या हैं?

उत्तर:

रिएक्ट स्वयं को रखरखाव योग्य और स्केलेबल यूआई आर्किटेक्चर के लिए कई सॉफ्टवेयर डिजाइन पैटर्न के लिए स्वाभाविक रूप से उधार देता है।

पैटर्न विवरण उदाहरण
कंटेनर-प्रस्तुतकर्ता UI (प्रस्तुतकर्ता) से तर्क (कंटेनर) को अलग करें डेटा कंटेनर → UIComponent
नियंत्रित-अनियंत्रित राज्य बनाम DOM के माध्यम से फ़ॉर्म डेटा प्रबंधित करें फॉर्मिक बनाम कच्चे इनपुट
यौगिक घटक अभिभावक बाल रचना को नियंत्रित करता है <Tabs><Tab /></Tabs>
प्रदाता पैटर्न संदर्भ के माध्यम से स्थिति साझा करें थीमप्रदाता
हुक पैटर्न स्टेटफुल लॉजिक का पुन: उपयोग करें useAuth, useFetch

उदाहरण:

A Tabs घटक संदर्भ को उजागर करता है इसलिए <Tab> बच्चे स्वतः ही अपना पंजीकरण करा लेते हैं - एक स्वच्छ अनुप्रयोग यौगिक घटक पैटर्न.

36) रिएक्ट 18 और रिएक्ट 19 के बीच मुख्य अंतर क्या हैं?

उत्तर:

रिएक्ट 19 महत्वपूर्ण नई क्षमताओं के साथ रिएक्ट 18 के समवर्ती आधार पर निर्मित है।

Feature प्रतिक्रिया 18 प्रतिक्रिया 19
समवर्ती प्रतिपादन शुरू की बेहतर सस्पेंस के साथ सुधार
सर्वर घटक प्रयोगात्मक स्थिर और एकीकृत
क्रियाएँ API अनुपलब्ध फ़ॉर्म क्रियाओं को संभालने के लिए नया मानक
संपत्ति लोडिंग हाथ-संबंधी स्वचालित संसाधन लोडिंग
बेहतर त्रुटि प्रबंधन बुनियादी सीमा हुक के साथ दानेदार

प्रमुख लाभ:

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

37) माइक्रो-फ्रंटेंड कैसे काम करता है? Archiटेक्चर रिएक्ट के साथ कैसे एकीकृत होता है, और इसके क्या फायदे हैं?

उत्तर:

माइक्रो-फ्रंटएंड एक बड़े वेब ऐप को स्वतंत्र, परिनियोजन योग्य फ्रंट-एंड मॉड्यूल में विभाजित करते हैं। रिएक्ट इकोसिस्टम में, प्रत्येक माइक्रो-फ्रंटएंड एक स्टैंडअलोन ऐप होता है जिसे मॉड्यूल फेडरेशन, iframesया, कस्टम रनटाइम लोडर.

लाभ:

  • स्वतंत्र तैनाती और स्केलिंग.
  • तकनीकी स्टैकों में टीम स्वायत्तता।
  • तेजी से पाइपलाइनों का निर्माण.

उदाहरण:

का प्रयोग वेबपैक मॉड्यूल फेडरेशनटीमें गतिशील रूप से ऐप्स में रिएक्ट घटकों को प्रदर्शित कर सकती हैं:

exposes: { './NavBar': './src/NavBar' }

नुकसान:

  • साझा राज्य प्रबंधन जटिलता.
  • पृथक बंडलों से प्रदर्शन ओवरहेड.

38) प्रोडक्शन में रिएक्ट एप्लिकेशन को स्केल करने के लिए आप किन कारकों पर विचार करते हैं?

उत्तर:

रिएक्ट अनुप्रयोगों को स्केल करने में तकनीकी, वास्तुशिल्प और परिचालन संबंधी विचार शामिल होते हैं।

प्रमुख घटक:

  1. कोड संरचना - मॉड्यूलर कोड साझाकरण के लिए मोनोरेपो (एनएक्स/टर्बोरेपो) को अपनाएं।
  2. राज्य प्रबंधन — स्थानीय बनाम वैश्विक बनाम सर्वर स्थिति खंड.
  3. प्रदर्शन — आलसी लोडिंग, मेमोइज़ेशन, सीडीएन कैशिंग।
  4. निगरानी — त्रुटियों और मेट्रिक्स के लिए Sentry, Datadog, या LogRocket का उपयोग करें।
  5. परीक्षण और CI/CD - स्वचालित पाइपलाइन और दृश्य प्रतिगमन परीक्षण।

उदाहरण:

एक बड़ा ई-कॉमर्स प्लेटफॉर्म SSR के लिए Next.js, पूर्वानुमानित स्थिति के लिए Redux टूलकिट, और पृथक वर्टिकल के लिए माइक्रो-फ्रंटेंड का उपयोग करके रिएक्ट ऐप्स को स्केल करता है।

39) आप एसिंक्रोनस व्यवहार का उपयोग करने वाले रिएक्ट घटकों का परीक्षण कैसे करते हैं?

उत्तर:

एसिंक्रोनस रिएक्ट घटकों के परीक्षण के लिए परीक्षण रनर और घटक की स्थिति अद्यतन के बीच समन्वय की आवश्यकता होती है।

सर्वोत्तम प्रथाएं:

  • उपयोग waitFor or findBy* रिएक्ट टेस्टिंग लाइब्रेरी में क्वेरीज़।
  • नकली फ़ेच कॉल या API का उपयोग करना msw.
  • पसंद करते हैं नकली टाइमर (jest.useFakeTimers()) टाइमआउट-आधारित प्रभावों के लिए।

उदाहरण:

test('loads and displays data', async () => {
  render(<UserList />);
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

यह सुनिश्चित करता है कि परीक्षण अभिकथन करने से पहले React के async अपडेट की प्रतीक्षा करता है।

40) बताएं कि आप एक बड़े पैमाने पर, रखरखाव योग्य रिएक्ट परियोजना संरचना कैसे डिजाइन करेंगे।

उत्तर:

एक स्केलेबल रिएक्ट प्रोजेक्ट में मॉड्यूलरिटी, स्पष्टता और टीम सहयोग का संतुलन होना चाहिए।

अनुशंसित फ़ोल्डर संरचना:

src/
 ├── components/         # Reusable UI elements
 ├── features/           # Feature-specific modules
 ├── hooks/              # Custom reusable hooks
 ├── context/            # Global providers
 ├── pages/              # Route-level views
 ├── services/           # API and utilities
 ├── assets/             # Static resources
 ├── tests/              # Unit & integration tests
 └── index.js

सर्वोत्तम प्रथाएं:

  • पथ उपनामों के साथ पूर्ण आयात का उपयोग करें.
  • सख्त लिंटिंग (ESLint + Prettier) बनाए रखें।
  • उपयोग TypeScript प्रकार सुरक्षा के लिए.
  • परमाणु डिजाइन या सुविधा-आधारित स्लाइसिंग के साथ घटक सीमाओं को लागू करें।

उदाहरण:

वास्तविक दुनिया के सेटअप में, एक "उपयोगकर्ता" सुविधा में शामिल हो सकता है UserSlice.js, UserAPI.js, UserCard.jsx, तथा User.test.js, सभी के भीतर src/features/user/.

🔍 वास्तविक दुनिया के परिदृश्यों और रणनीतिक प्रतिक्रियाओं के साथ शीर्ष React.js साक्षात्कार प्रश्न

1) React.js में कार्यात्मक और वर्ग घटकों के बीच मुख्य अंतर क्या हैं?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता रिएक्ट घटक वास्तुकला और आधुनिक सर्वोत्तम प्रथाओं के बारे में आपकी समझ का परीक्षण करना चाहता है।

उदाहरण उत्तर:

“कार्यात्मक घटक सरल होते हैं और स्थिति और जीवनचक्र विधियों के प्रबंधन के लिए हुक पर निर्भर करते हैं, जबकि वर्ग घटक उपयोग करते हैं this और जीवनचक्र विधियाँ जैसे componentDidMount. कार्यात्मक घटकों को आम तौर पर आज पसंद किया जाता है क्योंकि वे क्लीनर कोड को बढ़ावा देते हैं, परीक्षण करने में आसान होते हैं, और रिएक्ट की रेंडरिंग प्रक्रिया में अनुकूलन के कारण बेहतर प्रदर्शन करते हैं।

2) क्या आप बता सकते हैं कि रिएक्ट में वर्चुअल DOM कैसे काम करता है?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता रिएक्ट के मुख्य प्रदर्शन तंत्र पर आपकी पकड़ का मूल्यांकन करना चाहता है।

उदाहरण उत्तर:

"वर्चुअल DOM, वास्तविक DOM का इन-मेमोरी प्रतिनिधित्व है। जब किसी कंपोनेंट की स्थिति बदलती है, तो React सबसे पहले वर्चुअल DOM को अपडेट करता है, 'डिफिंग' नामक प्रक्रिया का उपयोग करके पिछले संस्करण से उसकी तुलना करता है, और फिर वास्तविक DOM के केवल उन्हीं हिस्सों को अपडेट करता है जिनमें बदलाव हुए हैं। यह तरीका प्रत्यक्ष DOM हेरफेर को कम करके प्रदर्शन को बेहतर बनाता है।"

3) आप बड़े पैमाने पर रिएक्ट एप्लिकेशन में स्थिति का प्रबंधन कैसे करते हैं?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता राज्य प्रबंधन तकनीकों और उपकरणों के बारे में आपके अनुभव के बारे में जानना चाहता है।

उदाहरण उत्तर:

"बड़े अनुप्रयोगों में, मैं आमतौर पर Redux या Zustand जैसी केंद्रीकृत स्टेट मैनेजमेंट लाइब्रेरीज़ का उपयोग करता हूँ। Redux एक पूर्वानुमानित डेटा प्रवाह प्रदान करता है और टाइम-ट्रैवल डिबगिंग टूल्स के माध्यम से डिबगिंग को आसान बनाता है। सरल अनुप्रयोगों के लिए, मैं अनावश्यक जटिलता से बचने के लिए Context API और हुक्स का उपयोग करना पसंद करता हूँ।"

4) उस समय का वर्णन करें जब आपने रिएक्ट प्रदर्शन को अनुकूलित किया था।

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता प्रदर्शन अनुकूलन के संबंध में आपके व्यावहारिक अनुभव को समझना चाहता है।

उदाहरण उत्तर:

"मेरी पिछली भूमिका में, अनावश्यक स्थिति परिवर्तनों के कारण हमारा एप्लिकेशन अत्यधिक री-रेंडर हो रहा था। मैंने React.memo और useCallback अनावश्यक री-रेंडरिंग को रोकने के लिए हुक का इस्तेमाल किया। मैंने रिएक्ट प्रोफाइलर का उपयोग करके प्रदर्शन का विश्लेषण भी किया और उन घटकों की पहचान की जिन्हें मेमोइज़ेशन की आवश्यकता थी, जिससे रेंडरिंग का समय लगभग 30% कम हो गया।

5) आप रिएक्ट में साइड इफेक्ट्स को कैसे संभालते हैं?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता हुक्स और जीवनचक्र प्रबंधन के बारे में आपकी समझ का आकलन करना चाहता है।

उदाहरण उत्तर:

"मैं एपीआई कॉल या DOM हेरफेर जैसे दुष्प्रभावों को संभालता हूं useEffect हुक। हुक मुझे निर्भरताएँ निर्दिष्ट करने की अनुमति देता है, यह सुनिश्चित करते हुए कि प्रभाव केवल तभी चलता है जब वे निर्भरताएँ बदलती हैं। इससे पूर्वानुमानित व्यवहार बनाए रखने और अनंत लूप से बचने में मदद मिलती है।”

6) मुझे एक रिएक्ट प्रोजेक्ट में आपके सामने आई चुनौतीपूर्ण बग के बारे में बताएं और बताएं कि आपने इसे कैसे हल किया।

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता आपकी समस्या-समाधान और समस्या निवारण कौशल का आकलन करना चाहता है।

उदाहरण उत्तर:

"पिछली स्थिति में, मुझे एक बग का सामना करना पड़ा जहाँ स्टेट अपडेट UI में दिखाई नहीं दे रहे थे। जाँच करने पर, मुझे पता चला कि समस्या स्टेट ऑब्जेक्ट की नई कॉपी बनाने के बजाय उसे सीधे म्यूटेट करने के कारण हुई थी। मैंने अपरिवर्तनीय अपडेट का उपयोग करने के लिए कोड को रीफैक्टोर किया, जिससे समस्या का समाधान हो गया और डेटा की स्थिरता में सुधार हुआ।"

7) आप रिएक्ट अनुप्रयोगों में फॉर्म सत्यापन कैसे संभालते हैं?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता यह देखना चाहता है कि क्या आप उपयोगकर्ता इनपुट सत्यापन को क्रियान्वित करना जानते हैं।

उदाहरण उत्तर:

"मैं आमतौर पर फ़ॉर्म इनपुट प्रबंधित करने के लिए नियंत्रित घटकों का उपयोग करता हूँ, और सत्यापन के लिए फ़ॉर्मिक या रिएक्ट हुक फ़ॉर्म जैसी लाइब्रेरीज़ के साथ संयोजन करता हूँ। ये उपकरण त्रुटियों को संभालना, फ़ॉर्म स्थिति प्रबंधित करना और Yup जैसी तृतीय-पक्ष सत्यापन लाइब्रेरीज़ के साथ एकीकरण को आसान बनाते हैं।"

8) ऐसी स्थिति का वर्णन करें जहां आपको रिएक्ट प्रोजेक्ट पर काम करते समय बैकएंड डेवलपर्स के साथ सहयोग करना पड़ा हो।

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता आपकी टीमवर्क और संचार कौशल का मूल्यांकन करना चाहता है।

उदाहरण उत्तर:

"अपनी पिछली भूमिका में, मैंने एक डैशबोर्ड एप्लिकेशन के लिए REST API डिज़ाइन करने हेतु बैकएंड डेवलपर्स के साथ मिलकर काम किया था। शुरुआती विकास चरणों के दौरान हम डेटा फ़ॉर्मेट और एंडपॉइंट पर सहमत हुए थे। मैंने बैकएंड के निर्माण के दौरान फ्रंट-एंड डेवलपमेंट जारी रखने के लिए मॉक रिस्पॉन्स भी बनाए, ताकि बाद में सुचारू एकीकरण सुनिश्चित हो सके।"

9) आप कैसे सुनिश्चित करते हैं कि आपके रिएक्ट घटक पुन: प्रयोज्य और रखरखाव योग्य हैं?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता घटक डिजाइन और मापनीयता के प्रति आपके दृष्टिकोण के बारे में जानना चाहता है।

उदाहरण उत्तर:

"मैं छोटे, केंद्रित घटकों के निर्माण के सिद्धांत का पालन करता हूँ जो एक ही ज़िम्मेदारी संभालते हैं। मैं लचीलेपन के लिए प्रॉप्स का भी उपयोग करता हूँ, और CSS-in-JS या स्टाइल्ड-कंपोनेंट्स के साथ स्टाइलिंग को मॉड्यूलर रखता हूँ। इससे यह सुनिश्चित होता है कि घटकों का आसानी से पुन: उपयोग किया जा सके और पूरे प्रोजेक्ट में उनका रखरखाव किया जा सके।"

10) आप React.js के रुझानों और सर्वोत्तम प्रथाओं के साथ कैसे अपडेट रहते हैं?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता निरंतर सीखने के प्रति आपकी प्रतिबद्धता का मूल्यांकन करना चाहता है।

उदाहरण उत्तर:

"मैं रिएक्ट के आधिकारिक दस्तावेज़ों और सामुदायिक ब्लॉग्स को पढ़कर अपडेट रहता हूँ। मैं रिएक्ट कॉन्फ़्रेंस जैसे रिएक्ट कॉन्फ़्रेंस के व्याख्यान भी देखता हूँ और 'रिएक्ट पॉडकास्ट' जैसे पॉडकास्ट भी सुनता हूँ। ये संसाधन मुझे कॉन्करेंट रेंडरिंग और सर्वर कंपोनेंट्स जैसी नई सुविधाओं के बारे में जानकारी रखने में मदद करते हैं।"

इस पोस्ट को संक्षेप में इस प्रकार लिखें: