टाइपस्क्रिप्ट में Function Components बनाम React.FC: एक सभ्य चर्चा

React कंपोनेंट्स में टाइपस्क्रिप्ट टाइपिंग के विकास को समझना

टाइपस्क्रिप्ट में Function Components बनाम React.FC: एक सभ्य चर्चा

React और TypeScript एक प्रोजेक्ट में साथ चलते हैं। TypeScript कहता है, "मैं टाइप्स संभालूंगा।" React कहता है, "मैं रेंडरिंग संभालूंगा।" और कहीं न कहीं, कोई पूछता है:

क्या हमें React.FC का उपयोग करना चाहिए, या सीधे फंक्शन को टाइप करना चाहिए?

यह एक समझदार सवाल है। पहली नजर में, React.FC चिकना, आधिकारिक — यहाँ तक कि परिष्कृत भी लगता है। जैसे कि यह आपके कोड को एक ग्लास वाइन परोसे और कहे "आइए इस कंपोनेंट को एलिगेंट बनाएं।" लेकिन सतह के नीचे, यह कुछ भार लेकर आता है जिसे आधुनिक TypeScript ने अधिकांशतः पार कर लिया है।

आइए इसे करीब से देखें।

दो शैलियाँ

सादा फंक्शन कंपोनेंट

type Props = { title: string };

function MyComponent({ title }: Props) {
  return <h1>{title}</h1>;
}

स्वच्छ, स्पष्ट, और समझने में आसान। जैसे काला कॉफ़ी: बिना किसी सजावट के, बस काम करता है।

या, अगर आप ऐरो फंक्शंस पसंद करते हैं:

const MyComponent = ({ title }: Props) => {
  return <h1>{title}</h1>;
};

दोनों वैध, पठनीय, और वर्तमान सर्वोत्तम प्रथाओं के साथ अच्छी तरह मेल खाते हैं।

React.FC संस्करण

import { FC } from 'react';

type Props = { title: string };

const MyComponent: FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

यह संस्करण कंपोनेंट को एक जेनेरिक टाइप के साथ लपेटता है। यह अधिक "आधिकारिक" दिखता है, और यदि आपने हाल ही में TypeScript के यूटिलिटी टाइप्स को खोजा है, तो यह एक प्राकृतिक फिट की तरह महसूस हो सकता है — जैसे आपने एक गुप्त क्लब खोल दिया हो। लेकिन कभी-कभी, गुप्त क्लब के साथ कुछ बड़ा अक्षरशः नियम भी होते हैं।

React.FC वास्तव में क्या करता है

React.FC (React.FunctionComponent का संक्षिप्त रूप) एक सहायक टाइप है जो एक फंक्शन कंपोनेंट का वर्णन करता है। यह कुछ डिफ़ॉल्ट व्यवहार प्रदान करता है:

  • यह डिफ़ॉल्ट रूप से children प्रॉप को शामिल करता है, चाहें आप चाहें या नहीं।
  • कुछ संपादकों में कभी-कभी ऑटोकॉम्पलीट को बेहतर बना सकता है।
  • यह फंक्शन के रिटर्न टाइप को थोड़ा अधिक स्पष्ट बना सकता है, हालांकि व्यावहारिक रूप से यह अक्सर मायने नहीं रखता।

ये मामूली सहूलियतें हैं, और React + TypeScript के शुरुआती दिनों में ये अधिक उपयोगी थीं। लेकिन समय बदल चुका है, और आज ये "फीचर्स" अक्सर मदद करने की बजाय बाधा बन जाते हैं।

क्यों इसकी लोकप्रियता कम हो रही है

आप कह सकते हैं कि React.FC TypeScript की उन कपड़ों की तरह है जिनमें पॉकेट तो बहुत हैं, लेकिन ज्यादातर खाली होते हैं।

  1. अप्रत्यक्ष children

हर कंपोनेंट को children प्रॉप मिलती है, चाहे उसे इसकी जरूरत हो या न हो। इससे भ्रमित करने वाले बग्स हो सकते हैं जब डेवलपर्स मान लेते हैं कि children वैध हैं केवल इसलिए कि टाइप ऐसा कहता है। (संकेत: वे आवश्यक नहीं हो सकते।)

  1. जेनेरिक के साथ असुविधाजनक

जब आपके कंपोनेंट को जेनेरिक टाइप्स की जरूरत होती है, React.FC चीजों को उलझा देता है, साफ नहीं। सिंटैक्स जटिल हो जाता है, और TypeScript कम मददगार हो जाता है, ज्यादा नहीं।

  1. स्पष्टता बिना verbosity

const MyComponent: FC<Props> लिखना अधिक लंबा और संभवतः सीधे प्रॉप्स को टाइप करने की तुलना में अधिक अस्पष्ट है।

  1. अब आवश्यक नहीं

React.FC के उपयोग के मूल कारण — संपादक समर्थन, JSX इंफरेंस — अधिकांशतः TypeScript में सुधार द्वारा संबोधित किए जा चुके हैं। जो कभी व्यावहारिक वर्कअराउंड था वह अब केवल एक विरासत शैली बन गया है।

तुलनात्मक सारणी

फ़ीचर function Component() const Component: FC
children शामिल? केवल अगर घोषित हो हमेशा शामिल
जेनेरिक का समर्थन? सहजता से बिना प्रयास के नहीं
verbosity? न्यूनतम स्पष्ट रूप से अधिक
संपादक समर्थन? पर्याप्त विशिष्ट मामलों में थोड़ा बेहतर
अनुशंसित? हाँ अब नहीं

अनुशंसित तरीका

समुदाय में सहमति सरल है: अपने प्रॉप्स को सीधे टाइप करें। यदि आप चाहते हैं कि आपका कंपोनेंट children स्वीकार करे, तो बताएं। यदि नहीं, तो यह नहीं करेगा। यह वह ईमानदारी है जिसकी आपकी भविष्य की स्वयं सराहना करेगी।

type Props = {
  title: string;
  children?: React.ReactNode;
};

const MyComponent = ({ title, children }: Props) => (
  <div>
    <h1>{title}</h1>
    {children}
  </div>
);

यह स्पष्ट है। यह बनाए रखने योग्य है। और यह झूठ नहीं बोलता कि आपका कंपोनेंट children संभालता है जबकि वह ऐसा नहीं करता।

क्या ऐसी स्थितियां हैं जहां FC अभी भी सही बैठता है?

कभी-कभी। अगर आप किसी पुरानी कोडबेस में काम कर रहे हैं जो React.FC पर बहुत निर्भर है, तो संगति बनाए रखना सब कुछ फिर से लिखने से ज़्यादा मायने रख सकता है। यदि आप जल्दी से कंपोनेंट्स का मॉक बना रहे हैं और children टाइपिंग की चिंता नहीं करना चाहते, तो FC अभी भी एक शॉर्टकट हो सकता है।

लेकिन सामान्य तौर पर, यही अपवाद नियम को प्रमाणित करते हैं।

निष्कर्ष में

React.FC गलत नहीं है। यह केवल अब जरूरी नहीं। आधुनिक TypeScript ने React कंपोनेंट्स को टाइप करना सरल और अधिक पूर्वानुमेय बना दिया है बिना इसके।

तो अगली बार जब आप FC को पकड़ें, तो रुकें और सोचें कि क्या आप कोई मूल्य जोड़ रहे हैं — या सिर्फ अतिरिक्त परतें। अधिकतर मामलों में, एक सीधे टाइप किया गया फंक्शन आपके लिए बेहतर सेवा करेगा।

सॉफ्टवेयर में — जैसे जीवन में — स्पष्टता चालाकी से बेहतर होती है। और कम आश्चर्य का मतलब आमतौर पर कम पछतावा होता है।

Categories