Top 10 React Interview Questions in Hindi| ReactJS साक्षात्कार प्रश्न हिन्दी में

हैलो दोस्तों, आज के इस आर्टिकल मे जानेंगे की Top 10 React js interview questions and answers for freshers and experienced. React एक powerful, flexible और ओपन-सोर्स Javascript  लाइब्रेरी है जो डेवलपर्स को सरल, तेज और स्केलेबल वेब एप्लिकेशन बनाने मे मदद देता है। ध्यान दे React एक लाइब्रेरी (jQuery की तरह ) है ना की फ्रैम्वर्क (AngularJS की तरह )।  फेसबुक के लिए काम करने वाले सॉफ्टवेयर इंजीनियर जॉर्डन वॉके ने ReactJS बनाया।

 

Ques-1 What is difference between Virtual DOM and  Real DOM| रीयाक्ट  में वर्चुअल डोम और रियल डोम मे क्या अंतर है?

DOM मतलब डॉक्यूमेंट ऑब्जेक्ट मोडेल जो पेज पर सब दिखता है साधी भाषा में।  रिएक्ट वास्तविक (REAL) डोम का मेमोरी मे light weighted (कम  जगह लेने वाला ) एक रेपलिका रखता है, और इसे वर्चुअल डोम के रूप में जाना जाता है। जब किसी object की स्थिति बदल जाती है, तो वर्चुअल  डोम सभी ऑब्जेक्ट्स को बदलने  के बजाय सिर्फ  REAL डोम में केवल उस Object को बदलता है। उदाहरण:  बटन क्लिक से हेडर का टाइटल चेंज होता हो। तो पहले इसमे पूरा डोम चेंज होता था। लेकिन VIRTUAL DOM की मदद से अभी सिर्फ हेडर का part ही (वो node ही चेंज होता है। )  

REAL DOM	VIRTUAL DOM
ये धीरे अपडेट होता है	ये जल्दी अपडेट होता है
ये HTML से direct अपडेट allow करता है	इसमे HTML से डायरेक्ट अपडेट नहीं हो सकता
REAL DOM मे मेमोरी ज्यादा इस्तेमाल होती है	इसमे कम मेमोरी इस्तेमाल होती है
element अपडेट होता है तो नया DOM बनाया जाता है	वर्चुअल डोम मे element  अपडेट होने पर सिर्फ उसका JSX ही अपडेट होता है

 

Ques-2 What is Hooks | रीयाक्ट  में हूक्स क्या है?

React hooks फंगक्शनल कम्पोनन्ट मे ही इस्तेमाल होते है। React hooks फंगक्शन component मे state के रिलेटेड चेंजेस करने के काम मे आते है। 

Hooks का नाम	Hooks का काम
useState	useState हुक हमें फ़ंक्शन में State को ट्रैक करने के काम मे आता है।
useEffect	useEffect हुक आपको उसके ही component में  side effects करने के काम मे आता है।  side effects जैसे की : data निकालना , directly DOM को अपडेट करना  और  timers.
useContext	useContext react state को ग्लोबली मैनेज करने का तरीका है। यह useState के साथ मे इस्तेमाल होके नेस्टेड component मे state मैनेज करने के काम आता है।
useRef	useRef रेंडर्स के बीच मे वैल्यू संभालने का काम करता है। अपडेट के व्यक्त चेंज होने वाले ( mutuble) वैल्यूस जो रेंडर्स नहीं होने देते  उनको स्टोर करने के काम मे आता है।
useReducer	useReducer useState जैसा ही है। बस यह कॉम्प्लेक्स कस्टम लॉजिक के समय इस्तेमाल किया जाता है।

 

Ques-3 What is difference  between Functional and Class Component | रीयाक्ट  में फंगक्शनल  और क्लास कम्पोनन्ट मे क्या अंतर है ?

	Class Components	Functional Components
State	यह state मैनेज कर सकते है	यह state मैनेज नहीं कर सकते है
आसानी	stateless कम्पोनन्ट से थोड़ा ज्यादा मुश्किल होते है	यह आसान दिखते और आसानी से बनाए जा सकते है
Lifecycle methods	इसमे सभी lifecycle methods काम करते है	इसमे कोई भी  lifecycle methods काम नहीं करते है
वापस इस्तेमाल	इसको वापस बार बार इस्तेमाल कर सकते है, क्यूंकी ये क्लास कम्पोनन्ट है इसलिए	इसको एक बार ही इस्तेमाल किया जाता है

 

Ques-4 What is difference between Props and State | रीयाक्ट  में ?

	State	Props
इस्तेमाल	कम्पोनन्ट की इनफार्मेशन संभालता है	एक कम्पोनन्ट से दूसरे कम्पोनन्ट से डाटा argument बनकर पास होता है
mutability	mutable है	immutable
Read-Only	चेंज हो सकते है	चेंज नहीं हो सकते
Child components	child component इसे access नहीं कर सकते है	child component इसे access  कर सकते है
Stateless components	state नहीं होते	props होते है

 

Ques-5 What is Phases in Component LifeCycle| रीयाक्ट  में कौनसी lifecycle  की कौनसी फेजेज है?

रिएक्ट component के lifecycle के चार अलग-अलग phases हैं:

१) Initialization: इस फेज मे, react component डिफ़ॉल्ट props और state तयार होता है। 

२) Mounting:  Mounting मतलब एलिमेंट्स को ब्राउजर DOM पर रखना। इस फेज में  componentWillMount और componentDidMount

३) Updating:  इस फेज मे state और props जब बदलने वाले होते है तब यह फेज कॉल होता है। इस फेज मे lifecycle मेथड है:- componentWillUpdate, shouldComponentUpdate, render, and componentDidUpdate

४) Unmounting:  यह component lifecycle की आखरी फेज है, इसमे कम्पोनन्ट DOM मे से निकल जाता है या दूसरे शब्दों मे unmount हो जाता है। इस फेज मे componentWillUnmount lifecycle method आता है। 

 

Ques-6 How to increase React performance | रिएक्ट परफॉरमेंस को कैसे बढ़ाए ?

1. immutable data structure इस्तेमाल करके 
2. Function/Stateless Components और React.PureComponent इस्तेमाल करके 
3. छोटी छोटी files बनाना 
4. webpack  मे production mode इस्तेमाल करना 
5. Dependancy  optimization: जिस पैकेज की इग्ज़ैक्ट जरूरत हो, उसे ही इस्तेमाल करना 
6. बिना जरूरत के div wrapper इस्तेमाल करने की जगह react.fragment इस्तेमाल करना 
7. render फंगक्शन मे inline फंगक्शन इस्तेमाल नहीं करना 
8. event trigger rate कम करना 
9. index को key करके इस्तेमाल नहीं करना 
10. शुरुवात मे props को इस्तेमाल नहीं करना 
11. spreading (…) props अवॉइड करना क्यूंकी इसमे unnecessary HTML आ सकता है।  
12. बार बार re-render टालने के लिए redux मे reselect इस्तेमाल करना 
13. componentWIllMount मे Async intialization इस्तेमाल नहीं करना 
14. react component को memoise करना 

 

Ques-7 What is Higher order Component | रीयाक्ट  में हाइयर ऑर्डर कम्पोनन्ट क्या है?

एक Higher Order Component (HOC) Component logic का पुन: उपयोग करने के लिए रिएक्ट में एक advanced technique है। HOCs प्रति प्रतिक्रिया API का हिस्सा नहीं हैं। वे एक पैटर्न हैं जो रिएक्ट की संरचना प्रकृति से निकलते हैं। 

 

Ques-8 What is JSX | रीयाक्ट  में  JSX क्या है?

JSX का मतलब जावास्क्रिप्ट (Javascript) XML है।

JSX हमें रिएक्ट में HTML लिखने की अनुमति देता है।

JSX प्रतिक्रिया में HTML लिखना और जोड़ना आसान बनाता है।

 

Ques-9 What is difference between Redux and flux| रीयाक्ट  में रिड़कस और फ्लक्स मे क्या अंतर है?

MVC	FLUX	REDUX
MVC – Model View Controller UI Developingके लिए  Architectural design pattern	क्लाइंट-साइड वेब ऐप्स बनाने के लिए डिज़ाइन किया गया एप्लिकेशन आर्किटेक्चर।	UI बनाने के लिए प्रयुक्त ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी यह आम तौर पर प्रतिक्रिया और कोणीय विकास के साथ काम करता है।
bi-directional प्रवाह का अनुसरण करता है	यूनि – डायरेक्शनल प्रवाह का अनुसरण करता है	यूनि-डायरेक्शनल प्रवाह का अनुसरण करता है
स्टोर की कोई अवधारणा नहीं	इसमें कई स्टोर शामिल हैं	इसमें सिंगल स्टोर शामिल है
नियंत्रक पूरे तर्क को संभालता है	यह स्टोर सभी तर्कों को संभालता है	रेड्यूसर सभी तर्कों को संभालता है
bi-directiona प्रवाह के कारण डिबगिंग कठिन है	डिस्पैचर के साथ सरल डिबगिंग सुनिश्चित करता है	सिंगल स्टोर डिबगिंग को बहुत आसान बनाता है
क्लाइंट और सर्वर-साइड फ्रेमवर्क दोनों में अच्छी तरह से चमकता है	क्लाइंट-साइड फ्रेमवर्क का समर्थन करता है	क्लाइंट-साइड फ्रेमवर्क का समर्थन करता है
एंगुलरजेएस, एम्बर, बैकबोन, स्प्राउट और नॉकआउट जैसे फ्रंट-एंड फ्रेमवर्क	रिएक्ट, एंगुलरजेएस, Vue.js और पॉलिमर जैसे फ्रंट-एंड फ्रेमवर्क का समर्थन करता है	रिएक्ट, Vue.js, AngularJS, Ember, Backbone.js, Meteor, और Polymer जैसे फ्रंट-एंड फ्रेमवर्क का समर्थन करता है

 

Ques-10 What is Pure Component | रीयाक्ट  में प्युर कम्पोनन्ट क्या है?

अब, ReactJS ने हमें एक Pure Component प्रदान किया है। Pure Component खुदकों बार बार re-render होने से रोकता है अगर state या props मे कोई चेंज नहीं हुआ हो तो। इसीलिए इसमे shouldComponentUpdate() function की जरूरत नहीं होती।