JSX.Element, ReactNode, ReactElement: TypeScript में कब क्या उपयोग करें?

JSX.Element बनाम ReactNode बनाम ReactElement: प्रकारों की लड़ाई जिसे आपको जीतना ही होगा

नमस्ते, सहकर्मी! यदि आप React को TypeScript के साथ लिखते हैं, तो आपने निश्चित रूप से ऐसी स्थिति का सामना किया होगा जहाँ कंपाइलर रिटर्न वैल्यू के प्रकारों पर आपत्ति जताने लगता है। "Expected JSX.Element, got ReactNode" — एक परिचित त्रुटि? या हो सकता है, आपने जेनेरिक में ReactElement देखा हो और सोचा हो: "आखिर इसमें क्या अंतर है?"

स्पॉयलर: ये केवल शैक्षणिक शब्द नहीं हैं। सही प्रकार का चयन आपके कोड को गति दे सकता है, बग को रोक सकता है और घटकों को अधिक पूर्वानुमानित बना सकता है। आज हम इस विषय को वास्तविक उदाहरणों के साथ समझेंगे, ताकि आप इन तीन प्रकारों को फिर कभी भ्रमित न करें। चलिए शुरू करते हैं!

संक्षिप्त परिचय: क्या है क्या

आइए मूल बातों से शुरू करें। ये तीनों प्रकार एक ही पारिस्थितिकी तंत्र के भाग हैं, लेकिन अमूर्तता की अलग-अलग डिग्री के साथ।

ReactElement

यह मूलभूत निर्माण खंड है। ReactElement एक ऑब्जेक्ट है जिसमें प्रकार, प्रॉप्स और कुंजी होती है। यह एक तत्व का "ब्लूप्रिंट" दर्शाता है, जिसे React बाद में वास्तविक DOM नोड में बदल देता है। यदि आप React.createElement('div', null, 'Hello') लिखते हैं, तो आपको वास्तव में ReactElement मिलता है।

import React from 'react';\n\nconst element: React.ReactElement = React.createElement('div', { className: 'box' }, 'नमस्ते!');\n// प्रकार: ReactElement<{ className: string }, 'div'>

महत्वपूर्ण: ReactElement एक जेनेरिक है। आप प्रॉप्स का प्रकार और तत्व का प्रकार निर्दिष्ट कर सकते हैं:

type MyElement = React.ReactElement<{ name: string }, 'button'>;

JSX.Element

यह ReactElement का विस्तार है, जो JSX की विशिष्टता जोड़ता है। मूल रूप से, JSX.Element एक ReactElement<any, any> है। जब आप JSX में <div /> लिखते हैं, तो TypeScript इसे JSX.Element के रूप में देखता है।

const jsxElement: JSX.Element = <div>JSX.Element</div>;

ReactElement से मुख्य अंतर यह है कि JSX.Element पैरामीटराइज़ नहीं होता है। यह बस "कोई भी JSX तत्व" है।

ReactNode

और यह सबसे व्यापक प्रकार है। ReactNode में शामिल हैं:

\n
• ReactElement
\n
• स्ट्रिंग्स
\n
• संख्याएँ
\n
• Booleans (true/false)
\n
• null और undefined
\n
• उपरोक्त सभी की सरणियाँ
\n
• React Portal
\n

सरल शब्दों में: ReactNode वह सब कुछ है जिसे React रेंडर कर सकता है। घटकों में children के लिए इसी प्रकार का उपयोग किया जाता है।

type ReactNode = \n  | React.ReactElement\n  | string\n  | number\n  | boolean\n  | null\n  | undefined\n  | React.ReactNode[];

कब क्या उपयोग करें? व्यावहारिक परिदृश्य

अब सबसे दिलचस्प भाग — आइए देखें कि वास्तविक स्थितियों में कौन सा प्रकार चुनना है।

परिदृश्य 1: घटक का रिटर्न वैल्यू

आपका घटक JSX लौटाता है। कौन सा प्रकार निर्दिष्ट करें?

// ❌ खराब: बहुत सामान्य प्रकार\nfunction MyComponent(): ReactNode {\n  return <div>नमस्ते</div>;\n}\n\n// ✅ अच्छा: JSX.Element का उपयोग करें\nfunction MyComponent(): JSX.Element {\n  return <div>नमस्ते</div>;\n}\n\n// ✅ उत्कृष्ट: यदि प्रॉप्स की सख्त टाइपिंग चाहिए\nfunction MyComponent(): React.ReactElement<{ title: string }> {\n  return <div>नमस्ते</div>;\n}

क्यों? घटक हमेशा JSX (या null, यदि कुछ भी रेंडर नहीं करता) लौटाता है। ReactNode बहुत व्यापक है — यह स्ट्रिंग, संख्या या सरणी लौटाने की अनुमति देता है, जो अप्रत्याशित त्रुटियों का कारण बन सकता है।

परिदृश्य 2: घटक में children

यहाँ ReactNode आपका सबसे अच्छा दोस्त है। चाइल्ड एलिमेंट कुछ भी हो सकते हैं: स्ट्रिंग, दूसरा घटक, null (सशर्त रेंडरिंग) या सरणी।

interface CardProps {\n  title: string;\n  children: React.ReactNode; // ✅ सही\n}\n\nfunction Card({ title, children }: CardProps): J