MarathiSoul

Menu

Top 50 React Interview Questions and Answers 2025 | टॉप ५० React इंटरव्ह्यू प्रश्न आणि उत्तरे २०२५

द्वारा/
React Interview Questions

Reaction Interview Questions - A Complete Guide | React इंटरव्यू प्रश्न - एक संपूर्ण मार्गदर्शक

React हा एक लोकप्रिय JavaScript लायब्ररी आहे, ज्याचा वापर वेब आणि मोबाइल अ‍ॅप्लिकेशन्स तयार करण्यासाठी केला जातो. अनेक कंपन्यांमध्ये React डेव्हलपर्ससाठी रोजगाराच्या संधी उपलब्ध आहेत. त्यामुळे React च्या मुलाखतीच्या तयारीसाठी महत्त्वाचे प्रश्न जाणून घेणे अत्यंत आवश्यक आहे. या ब्लॉगमध्ये, आम्ही React संबंधित मुलाखतीचे काही महत्त्वाचे प्रश्न आणि त्यांची उत्तरे सादर करणार आहोत.

What is React? | React म्हणजे काय?

React हा एक declarative, efficient आणि flexible JavaScript लायब्ररी आहे. याचा वापर वेब ऍप्लिकेशन्समध्ये वापरकर्त्यांना संवाद साधण्यासाठी यूजर इंटरफेस (UI) तयार करण्यासाठी केला जातो. React मध्ये आपल्याला एकाच वेळी अनेक UI घटक तयार करता येतात आणि त्यांना एकत्र करून मोठ्या ऍप्लिकेशनमध्ये समाकलित करता येते.

What is React

Important Features of React | React चे महत्त्वाचे वैशिष्ट्ये

  1. Virtual DOM: React मध्ये Virtual DOM (Document Object Model) वापरला जातो. हा एक तात्कालिक स्टेट असतो जो वास्तविक DOM च्या बदलांसाठी प्रतिक्रिया देतो. यामुळे अनुप्रयोगाचा कार्यप्रदर्शन अधिक वेगवान होतो.
  2. Components: React मध्ये UI घटकांची पुनःवापरण्याची क्षमता असते. प्रत्येक घटक स्वतंत्रपणे कार्य करतो, जो पुनः वापरायला सोपा असतो.
  3. JSX (JavaScript XML): React मध्ये HTML आणि JavaScript एकत्र वापरले जातात, ज्याला JSX म्हटले जाते. JSX मध्ये आपल्याला JavaScript मध्ये HTML चे लिखाण करता येते.

React Interview Questions: Important Points to Prepare | React मुलाखत प्रश्न: तयारीसाठी महत्त्वाचे मुद्दे

React Interview Questions

1. What are the benefits of React? | React चे फायदे काय आहेत?

  • पुनः वापरण्यायोग्य घटक (Reusable Components)
  • कार्यप्रदर्शन सुधारणा (Improved Performance)
  • एकाच दिशेने डेटा प्रवाह (Unidirectional Data Flow)
  • Declarative UI
  • सुलभ एकत्रिकरण (Easy Integration)

2. What is JSX? | JSX काय आहे?

JSX हा JavaScript XML आहे, जो HTML आणि JavaScript चे मिश्रण आहे. हा एक सिंटॅक्स आहे, जो React मध्ये वापरला जातो, आणि तो HTML सारखा दिसतो पण JavaScript मध्ये वापरता येतो.

3. What is the difference between Virtual DOM and Real DOM? | Virtual DOM आणि Real DOM मध्ये काय फरक आहे? 

Virtual DOM
Real DOM

React मध्ये Virtual DOM वापरला जातो.

Real DOM प्रत्यक्षात HTML DOM चा वापर करतो.

Virtual DOM चे काम वेगवान आणि कार्यक्षम असते.

Real DOM चे अपडेट अधिक वेळ घेतात.

React मध्ये, बदल हे Virtual DOM मध्ये होतात आणि नंतर ती Real DOM मध्ये प्रतिबिंबित होतात.

Real DOM मध्ये प्रत्येक बदल प्रत्यक्षात काढला जातो.

4. What is the difference between State and Props? | State आणि Props मध्ये काय फरक आहे?

  • State: घटकांच्या आत राहणारी स्थिती. ती बदलता येते आणि घटकाच्या जीवनचक्रावर प्रभाव टाकते.
  • Props: घटकाला त्याचे इनपुट म्हणून दिले जातात आणि ते Immutable असतात.

5. What are Life Cycle Methods in React? | React मध्ये Life Cycle Methods काय आहेत?

React घटकांना त्याच्या जीवनचक्रात विविध स्टेजेस (निर्मिती, अपडेट, नष्ट होणे) असतात. Life Cycle Methods त्याचा कंट्रोल करतात.

Life Cycle Method
वर्णन

componentDidMount()

घटक जेव्हा DOM मध्ये जोडला जातो तेव्हा चालतो.

shouldComponentUpdate()

घटकाच्या स्थितीच्या बदलानंतर अपडेट होईल का ते ठरवतो.

componentWillUnmount()

घटकाला DOM पासून काढल्यावर कॉल केला जातो.

6. How do Forms work in React? | React मध्ये Forms कसे काम करतात?

React मध्ये forms कसे काम करतात हे महत्त्वाचे आहे. React मध्ये दोन प्रकारची form handling असते:

  • Controlled Components: इन्पुट फील्डचे स्टेट React मध्ये ठेवले जाते.
  • Uncontrolled Components: इन्पुट फील्डचे स्टेट DOM मध्ये ठेवले जाते.

7. What is React Router? | React Router काय आहे?

React Router हा एक लायब्ररी आहे जो React ऍप्लिकेशन्समध्ये राउटिंग आणि URL आधारित नेव्हिगेशनसाठी वापरला जातो. यामध्ये, विविध रूट्स आणि घटक जोडण्याची क्षमता असते.

8. What are React Hooks? | React Hooks काय आहेत?

React Hooks हे एक नवीनतम वैशिष्ट्य आहे ज्यामुळे आपण क्लास घटक न वापरता कार्यात्मक घटकांमध्ये स्थिती आणि जीवनचक्र पद्धती वापरू शकतो. काही महत्त्वाचे hooks:

  • useState: घटकाच्या स्थितीला ट्रॅक करण्यासाठी वापरला जातो.
  • useEffect: घटकाच्या जीवनचक्रावर प्रभाव टाकतो.
  • useContext: Context API वापरून डेटा आदानप्रदान करण्यासाठी.

9. What are Higher-Order Components (HOC)? | Higher-Order Components (HOC) काय आहेत?

Higher-Order Components (HOC) हे एक React डिज़ाइन पॅटर्न आहे ज्याद्वारे घटकांना पुनः वापरण्यायोग्य लॉजिक जोडता येतो. HOC एक फंक्शन आहे ज्याला एक घटक दिला जातो आणि तो घटक सुधारित करून परत करतो.

10. What is Context API? | Context API काय आहे?

Context API वापरून आपण React मध्ये डेटा एका घटकापासून दुसऱ्या घटकात सहजतेने प्रवाहित करू शकतो, जेव्हा आपल्याला “prop drilling” (ज्याद्वारे एका घटकातून दुसऱ्या घटकात props पास केले जातात) कमी करायचे असते.

11. Tell about the main features of React? | React च्या मुख्य वैशिष्ट्यांबद्दल सांगावे का?

React चे मुख्य वैशिष्ट्ये खालीलप्रमाणे आहेत:

  • एकाच दिशेने डेटा प्रवाह
  • पुनः वापरण्यायोग्य घटक
  • उच्च कार्यप्रदर्शन (Virtual DOM वापरून)
  • Declarative UI

12. How does Event Handling work in React? | Event Handling React मध्ये कसे कार्य करते?

React मध्ये इव्हेंट हँडलिंग JavaScript प्रमाणेच आहे. परंतु, React मध्ये इव्हेंट नावे camelCase मध्ये लिहिली जातात आणि इव्हेंट हँडलर फंक्शनला this संदर्भाची आवश्यकता असते. उदाहरण:

<button onClick={this.handleClick}>Click me</button>

13. What are Error Boundaries in React? | React मध्ये Error Boundaries काय आहेत?

Error Boundaries हे एक प्रकारचे React घटक आहेत जे दुसऱ्या घटकांमध्ये आलेल्या JavaScript त्रुटींना कॅच करतात आणि ऍप्लिकेशनचा क्रॅश होऊ न देतात. हे componentDidCatch() आणि static getDerivedStateFromError() जीवनचक्र पद्धती वापरून काम करतात.

14. How does data flow in React? | React मध्ये डेटा कसा प्रवाहित होतो?

React मध्ये डेटा एका घटकावरून दुसऱ्या घटकावर props च्या माध्यमातून प्रवाहित होतो. या पद्धतीला “one-way data binding” म्हटले जाते.

 

15. What is the difference between Functional Components and Class Components? | Functional Components आणि Class Components मध्ये काय फरक आहे? 

Functional Components
Class Components

फक्त फंक्शन्स आहेत आणि render() मेथड वापरत नाहीत.

render() मेथड असते आणि लाइफ सायकल मेथड्स वापरता येतात.

State आणि Hooks वापरून स्थिती व्यवस्थापित करू शकतात.

State व्यवस्थापित करण्यासाठी this.state वापरावे लागते.

साधारणतः कमी कोड असतो.

जास्त कोड असतो कारण constructor, render इत्यादी असतात.

16. How does useState hook work in React? | React मध्ये useState hook कसे काम करते?

useState hook वापरून आपण घटकाची स्थिती (state) बदलू शकतो. हे एक array परत करते, ज्यात पहिले घटक असते: स्थितीची वर्तमान किंमत आणि दुसरे घटक असते: स्थिती बदलणारा फंक्शन.

const [count, setCount] = useState(0);

17. What is useEffect hook in React? | React मध्ये useEffect hook काय आहे?

useEffect hook हे कार्यात्मक घटकांमध्ये जीवनचक्र पद्धतींचे अनुकरण करण्यासाठी वापरले जाते. आपण useEffect मध्ये API कॉल, DOM अपडेट्स किंवा इतर साइड इफेक्ट्स हाताळू शकता.

18. How does useRef hook work in React? | React मध्ये useRef hook कसे कार्य करते?

useRef hookचा वापर DOM घटकांना रेफरन्स देण्यासाठी आणि स्थिती सुधारित न करता रेफरन्स ठेवण्यासाठी केला जातो. यामुळे आपण एका घटकावरचे डाटा बदलू शकतो पण री-रेन्डरिंग होणार नाही.

19. What is the importance of Key in React? | React मध्ये Key चा महत्त्व काय आहे?

React मध्ये, key प्रॉप्स वापरून घटकांची अदलाबदल योग्य पद्धतीने केली जाते. यामुळे React ला DOM च्या कोणत्या घटकाला पुन्हा रेंडर करावे हे ठरवणे सोपे जाते.

20. How to do form validation in React? | React मध्ये form validation कसे करतात?

React मध्ये form validation साधारणतः onSubmit इव्हेंट मध्ये केली जाते. आपण state मध्ये एरर मेसेजेस ठेवू शकता आणि योग्य डेटा सबमिट केल्यावरच वापरकर्त्याला फॉर्म सबमिट करण्याची परवानगी देऊ शकता.

21. When to use React Context API? | React Context API कधी वापरावे?

Context API वापरणे योग्य असते जेव्हा आपल्याला एकाच घटकाच्या बाहेर असलेल्या अनेक घटकांमध्ये डेटा शेअर करायचा असेल, विशेषतः जेव्हा prop drilling समस्येस सामोरे जावे लागते.

22. What is Memoization in React? | React मध्ये Memoization म्हणजे काय?

Memoization म्हणजे फंक्शनचे परिणाम कॅश करणे, ज्यामुळे ते पुन्हा कार्यान्वित करताना वेळ वाचवता येतो. React मध्ये React.memo() हा फंक्शनल घटकांच्या कार्यप्रदर्शन सुधारण्यासाठी वापरला जातो.

23. What is Fragment in React? | React मध्ये Fragment काय आहे?

Fragment हे एक wrapper घटक आहे ज्याचा वापर आपल्याला अनेक घटक एकाच वेळी रेंडर करायचे असताना केला जातो. हे HTML मध्ये अतिरिक्त wrapper न जोडता कार्य करते.

24. What is forwardRef in React? | React मध्ये forwardRef काय आहे?

forwardRef ह्या API चा वापर करते जेव्हा आपण एक फंक्शनल घटकाला ref पास करू इच्छिता. यामुळे ref किंवा DOM चा वापर कार्यात्मक घटकांमध्ये केला जाऊ शकतो.

25. What is the difference between Controlled Components and Uncontrolled Components in React? | React मध्ये Controlled Components आणि Uncontrolled Components मध्ये काय फरक आहे? 

Controlled Components
Uncontrolled Components

घटकांची स्थिती React मध्ये नियंत्रित केली जाते.

घटकांची स्थिती DOM मध्ये नियंत्रित केली जाते.

इन्पुट फील्डच्या प्रत्येक बदलावर React मध्ये स्थिती अपडेट होतो.

इन्पुट फील्डचा बदल DOM मध्ये थेट होतो.

26. When to use Hooks in React? | React मध्ये Hooks कधी वापरावे?

Hooks वापरावे जेव्हा आपल्याला कार्यात्मक घटकांमध्ये स्थिती (state) किंवा जीवनचक्र पद्धती (life cycle methods) वापरायच्या असतात.

27. What is Redux? | Redux काय आहे?

Redux एक JavaScript लायब्ररी आहे जी अनुप्रयोगाच्या स्थितीचे केंद्रिय व्यवस्थापन करण्यासाठी वापरली जाते. हे स्थिती स्टोअर करून ती सर्व घटकांमध्ये सामायिक करते.

28. What are the main concepts of Redux? | Redux च्या मुख्य संकल्पना काय आहेत?

Redux मध्ये तीन मुख्य संकल्पना असतात:

  • Store: अनुप्रयोगाची स्थिती ठेवणारा.
  • Actions: स्थिती बदलण्यासाठी दिलेले ऑब्जेक्ट्स.
  • Reducers: स्थिति कशी बदलली पाहिजे हे ठरवणारे फंक्शन्स.

29. What is the difference between React and Angular? | React आणि Angular मध्ये काय फरक आहे? 

React
Angular

React एक लायब्ररी आहे.

Angular एक संपूर्ण फ्रेमवर्क आहे.

React मध्ये JSX वापरला जातो.

Angular मध्ये HTML आणि TypeScript वापरले जातात.

React मध्ये अधिक लवचिकता असते.

Angular मध्ये सर्व काही घटकांसह एकत्रित असते.

30. How to use Error Boundaries in React? | React मध्ये Error Boundaries कशा वापराव्यात?

React मध्ये त्रुटींना कॅच करण्यासाठी Error Boundaries वापरले जातात. ते घटकाच्या त्रुटींना कॅच करून त्यावर योग्य प्रतिसाद देतात.

31. What is useCallback hook in React? | React मध्ये useCallback hook काय आहे?

useCallback hook फंक्शनला कॅश करतो आणि त्याचे संदर्भ बदलले जात नाहीत, जेव्हा तो फंक्शन पुनः वापरला जातो.

32. How does the useReducer hook work in React? | React मध्ये useReducer hook कसा कार्य करतो?

useReducer hook हा स्थिती व्यवस्थापनासाठी वापरला जातो, विशेषतः जेव्हा स्थितीची जास्त पेक्षा जास्त माहिती असते किंवा अनेक क्रिया लागू असतात.

33. What is the useLayoutEffect hook in React? | React मध्ये useLayoutEffect hook काय आहे?

useLayoutEffect हा useEffect चा एक प्रकार आहे, जो DOM बदलल्यानंतर लगेचच चालतो.

34. Why are key props important in React? | React मध्ये key प्रॉप्स का महत्वाचे आहेत?

key प्रॉप्स रेंडरिंग ऑप्टिमायझेशनसाठी वापरले जातात, जेणेकरून React प्रत्येक घटकाच्या बदलाची योग्य पद्धतीने ओळख करू शकेल.

35. What is dangerouslySetInnerHTML in React? | React मध्ये dangerouslySetInnerHTML काय आहे?

dangerouslySetInnerHTML हा एक React प्रॉप आहे ज्याचा वापर HTML संकलित करण्यासाठी केला जातो, परंतु त्याला धोका असू शकतो, त्यामुळे त्याचा वापर काळजीपूर्वक करावा लागतो.

36. How Suspense and lazy work in React? | React मध्ये Suspense आणि lazy कसे काम करतात?

Suspense आणि lazy ह्याचा वापर कोड स्प्लिटिंगसाठी केला जातो. lazy वापरून आपण घटकांमध्ये लेझी लोडिंग करू शकतो.

37. What are PropTypes in React? | React मध्ये PropTypes काय आहेत?

PropTypes एक type-checking पॅटर्न आहे, जो React घटकांना props च्या प्रकाराची तपासणी करण्यासाठी वापरला जातो.

38. How does setState work in React? | React मध्ये setState कसा कार्य करतो?

setState ही एक मेथड आहे जी React घटकाच्या स्थितीला बदलते आणि पुन्हा रेंडर करते.

39. How does the useContext hook work in React? | React मध्ये useContext hook कसा कार्य करतो?

useContext hook Context API वापरून एका घटकात डेटा प्रवाहित करण्यासाठी वापरला जातो.

40. What is componentDidUpdate in React? | React मध्ये componentDidUpdate काय आहे?

componentDidUpdate जीवनचक्र पद्धतीमध्ये घटकाच्या स्थिती किंवा props मध्ये बदल झाल्यावर ही मेथड कॉल केली जाते.

41. What are Styled Components in React? | React मध्ये Styled Components काय आहेत?

Styled Components वापरून आपल्याला घटकांमध्ये CSS स्टाइल लागू करता येते. ह्या स्टाइल्सला JavaScript मध्ये डायनॅमिकली सेट केले जाते.

42. What is the second argument of useEffect in React? | React मध्ये useEffect चा दुसरा आर्ग्युमेंट काय आहे?

useEffect चा दुसरा आर्ग्युमेंट म्हणजे Dependency Array. जर आपल्याला useEffect केवळ काही विशिष्ट स्थिती बदलल्यावर चालवायचा असेल, तर आपण त्या स्थितीला या आर्ग्युमेंटमध्ये दिले पाहिजे.

43. What is useImperativeHandle in React? | React मध्ये useImperativeHandle काय आहे?

useImperativeHandle hook वापरून आपण कार्यात्मक घटकांना बाह्य API देऊ शकता.

44. What is HOC (Higher Order Component) in React? | React मध्ये HOC (Higher Order Component) काय आहे?

HOC (Higher Order Component) हा एक पॅटर्न आहे जो एक React घटक घेते आणि त्यात इतर व्यवहार किंवा स्थिती जोडतो. HOC एक फंक्शन आहे ज्याचा वापर कार्यात्मक घटकांचे पुनः उपयोग करण्यासाठी केला जातो.

function withLogging(Component) {

  return function WrappedComponent(props) {

    console.log(“Rendering”, Component.name);

    return <Component {…props} />;

  };

}

45. What is Virtual DOM in React? | React मध्ये Virtual DOM काय आहे?

Virtual DOM हा React चा एक महत्त्वाचा भाग आहे. हे एक हलका, इन-मेमोरी आवृत्ती आहे जो आपल्या UI चे DOM प्रतिनिधित्व करते. React प्रत्येक स्थिती बदलाच्या नंतर त्याच्या Virtual DOM मध्ये बदल करते आणि नंतर त्याचा तुलनात्मक शोध करून फक्त आवश्यक घटकांचे पुनः रेंडर करतो. यामुळे कार्यक्षमता आणि वापरकर्ता अनुभव सुधारला जातो.

46. How to use componentDidMount lifecycle method in React? | React मध्ये componentDidMount जीवनचक्र पद्धतीचा वापर कसा करावा?

componentDidMount हा एक जीवनचक्र पद्धती आहे जो घटक रेंडर झाल्यावर एकदाच कॉल केला जातो. याचा उपयोग API कॉल्स, इतर साइड इफेक्ट्स, किंवा बाह्य संसाधनांशी कनेक्ट होण्यासाठी केला जातो.

componentDidMount() {

  fetch(‘https://api.example.com/data’)

    .then(response => response.json())

    .then(data => this.setState({ data }));

}

47. React मध्ये useLayoutEffect आणि useEffect यामध्ये काय फरक आहे?

useEffect आणि useLayoutEffect दोन्ही hooks साइड इफेक्ट्स हाताळण्यासाठी वापरले जातात. तथापि, useLayoutEffect हा DOM अप्डेट्स होण्यापूर्वी चालतो, जेणेकरून आपल्याला UI सुसंगत ठेवता येईल, तर useEffect हे डोम बदल झाल्यानंतर चालते.

48. What is shallow comparison in React? | React मध्ये shallow comparison काय आहे?

Shallow comparison म्हणजे, दोन ऑब्जेक्ट्स किंवा एर्रेचे तुलनात्मक परीक्षण केल्यावर, त्यांच्या प्राथमिक मूल्यांनाच तपासले जाते. React मध्ये, shouldComponentUpdate() किंवा React.memo() हे shallow comparison वापरतात, म्हणजे ते केवळ एका घटकाच्या deep संरचनेला तपासत नाहीत.

49. How React Router works in React? | React मध्ये React Router कसे कार्य करते?

React Router हे एक लायब्ररी आहे जे React अनुप्रयोगांसाठी रूटिंग (URL च्या आधारावर घटक रेंडर करणे) सक्षम करते. हे URL च्या बदलावर आधारित योग्य घटक रेंडर करते.

<BrowserRouter>

  <Route path=”/about” component={About} />

</BrowserRouter>

50. What is Code Splitting in React? | React मध्ये Code Splitting म्हणजे काय?

Code splitting म्हणजे आपल्या कोडला छोट्या भागांमध्ये विभागणे ज्यामुळे फक्त आवश्यक भाग लोड होतात. यामुळे प्रारंभ वेळ कमी होतो आणि कार्यप्रदर्शन सुधारते. React मध्ये React.lazy() आणि Suspense यांचा वापर करून कोड स्प्लिटिंग केले जाते.

const OtherComponent = React.lazy(() => import(‘./OtherComponent’));

 

<Suspense fallback={<div>Loading…</div>}>

  <OtherComponent />

</Suspense>

Tips for React Interview Preparation

Important Tips for React Interview Preparation | React मुलाखतीच्या तयारीसाठी काही महत्त्वाचे टिप्स:

  1. React च्या आधारभूत संकल्पना समजून घ्या: React चे जसे Hooks, JSX, State, Props आणि Life Cycle Methods इत्यादी.
  2. Code Example शिका: React च्या विविध फीचर्सचे उदाहरण तयार करा. यामुळे तुम्हाला तेच लक्षात राहील.
  3. प्रॅक्टिकल प्रश्नांचा सराव करा: ऑनलाईन प्लॅटफॉर्मवरून प्रश्न सोडवून तुम्ही प्रॅक्टिकल नॉलेज मिळवू शकता.
  4. मुलाखतीसाठी विशिष्ट कागदपत्रे तयार करा: काही कंपन्या React संबंधित दोन भागी मुलाखत घेतात – एक सिद्धांत आणि एक कोडिंग टेस्ट.
  5. कोडिंगमध्ये चुकता येईल, म्हणून धीर ठेवा: वेळ घेतल्यास, चुकता येईल, परंतु त्यावर विचार करा.

React हा एक अत्यंत प्रभावी आणि लोकप्रिय JavaScript लायब्ररी आहे. त्यात वापरल्या जाणार्‍या विविध संकल्पना आणि तंत्रांचा अभ्यास करून, React च्या मुलाखतीच्या तयारीत अधिक यश मिळवता येऊ शकते. या ब्लॉगमध्ये दिलेल्या React मुलाखत प्रश्न आणि त्यांच्या उत्तऱ्यांच्या मदतीने, आपली तयारी अधिक मजबूत केली जाऊ शकते. यामुळे आपल्याला मुलाखतीत आत्मविश्वास वाढवता येईल आणि आपण एक चांगले React डेव्हलपर बनू शकता.

Related Posts

टिपणी करा

आपला ई-मेल अड्रेस प्रकाशित केला जाणार नाही. आवश्यक फील्डस् * मार्क केले आहेत

Scroll to Top