React में फंक्शनल कम्पोनेंट्स — आधुनिक विकास मानक

Functional Component क्या है?

Functional Component एक React कम्पोनेंट है जो एक फ़ंक्शन के रूप में परिभाषित होता है, जो props ऑब्जेक्ट स्वीकार करता है और React एलिमेंट लौटाता है। React 16.8 से पहले, ऐसे कम्पोनेंट्स को स्टेटलेस कहा जाता था क्योंकि वे आंतरिक स्टेट प्रबंधित नहीं कर सकते थे।

React 16.8 (फरवरी 2019) में हुक्स के आगमन के साथ, फंक्शनल कम्पोनेंट्स को स्टेट (useState), साइड इफेक्ट्स (useEffect), कॉन्टेक्स्ट (useContext) और रेफ़ (useRef) तक पहुँच मिली। ‘स्टेटलेस’ शब्द पुराना हो गया है — आधुनिक फंक्शनल कम्पोनेंट्स पूरी तरह से स्टेट प्रबंधित करते हैं।

React आधिकारिक तौर पर फंक्शनल कम्पोनेंट्स को कम्पोनेंट बनाने का प्राथमिक तरीका अनुशंसित करता है। react.dev पर सभी दस्तावेज़, उदाहरण, ट्यूटोरियल और नए API (Server Components, Actions) फंक्शनल दृष्टिकोण पर बने हैं। क्लास कम्पोनेंट्स हटाए नहीं गए हैं, लेकिन React की नई सुविधाएँ केवल हुक्स के माध्यम से उपलब्ध हैं।

फंक्शनल कम्पोनेंट बनाना

सबसे सरल फंक्शनल कम्पोनेंट एक फ़ंक्शन है जो JSX लौटाता है। यह props को तर्क के रूप में स्वीकार करता है, कंस्ट्रक्टर, super कॉल या this बाइंडिंग की आवश्यकता नहीं होती। Props सीधे फ़ंक्शन तर्क के माध्यम से उपलब्ध हैं — कोई this.props नहीं।

// Functional component without state
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Arrow function (common variant)
const Greeting = ({ name }) => (
  <h1>Hello, {name}!</h1>
);

स्टेट वाला कम्पोनेंट

स्टेट जोड़ने के लिए useState का उपयोग करें। हुक दो मानों का एक टपल लौटाता है: वर्तमान स्टेट और एक सेटर फ़ंक्शन। क्लास-आधारित this.setState के विपरीत, useState मान को पिछले के साथ मर्ज करने के बजाय पूरी तरह से बदल देता है।

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

फंक्शनल कम्पोनेंट्स में हुक्स

हुक्स आधुनिक React की नींव हैं। प्रत्येक हुक एक विशिष्ट कार्य हल करता है: useState — स्टेट, useEffect — साइड इफेक्ट्स, useContext — कॉन्टेक्स्ट एक्सेस, useRef — DOM एलिमेंट रेफरेंस, useCallback और useMemo — मेमोइज़ेशन।

साइड इफेक्ट्स के लिए useEffect

useEffect एक साथ componentDidMount, componentDidUpdate और componentWillUnmount को बदल देता है। पहला तर्क इफेक्ट वाला कॉलबैक है, दूसरा डिपेंडेंसी ऐरे है। यदि ऐरे खाली है, तो इफेक्ट माउंटिंग के बाद एक बार चलता है। यदि डिपेंडेंसी निर्दिष्ट हैं, तो उनमें से किसी के बदलने पर चलता है।

import React, { useState, useEffect } from 'react';

function UserData({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let cancelled = false;

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!cancelled) setUser(data);
      });

    // Cleanup - analog of componentWillUnmount
    return () => { cancelled = true; };
  }, [userId]); // Dependency

  return <div>{user?.name}</div>;
}

कस्टम हुक्स

फंक्शनल कम्पोनेंट्स का मुख्य लाभ कस्टम हुक्स के माध्यम से लॉजिक पुन: उपयोग है। जहाँ क्लास कम्पोनेंट में लॉजिक componentDidMount और componentDidUpdate के बीच दोहराया जाता था, वहीं फंक्शनल कम्पोनेंट में इसे use उपसर्ग वाले अलग फ़ंक्शन में निकाला जाता है। कस्टम हुक्स HOC और render props का मुख्य विकल्प हैं।

इनहेरिटेंस के बजाय कम्पोज़ीशन

React कम्पोनेंट्स के बीच कोड पुन: उपयोग के लिए इनहेरिटेंस के बजाय कम्पोज़ीशन अनुशंसित करता है। फंक्शनल कम्पोनेंट्स कम्पोज़ीशन के लिए आदर्श हैं: एक कम्पोनेंट में कई अन्य कम्पोनेंट हो सकते हैं, उन्हें props और children पास करते हुए।

children पैटर्न — जब कम्पोनेंट children prop के माध्यम से चाइल्ड एलिमेंट प्राप्त करता है — प्राकृतिक रूप से लागू होता है: function Layout({ children }). Vue के slots का एनालॉग नामित कम्पोनेंट props के माध्यम से लागू होता है: function Page({ header, sidebar, content }).

React में इनहेरिटेंस का शायद ही उपयोग होता है। यहाँ तक कि क्लास कम्पोनेंट्स, जो तकनीकी रूप से extends का समर्थन करते हैं, शायद ही एक स्तर से गहरी पदानुक्रम बनाते हैं। कम्पोज़ीशन वाले फंक्शनल कम्पोनेंट्स बिना इनहेरिटेंस के कोड पुन: उपयोग की जरूरतों को पूरी तरह से कवर करते हैं।

प्रदर्शन अनुकूलन

फंक्शनल कम्पोनेंट्स अंतर्निहित अनुकूलन तंत्र के साथ आते हैं। React.memo — फ़ंक्शन के लिए PureComponent का समकक्ष: यदि props नहीं बदले हैं तो पुन: रेंडर रोकता है (सतही तुलना)। useMemo रेंडर के बीच गणना परिणामों को कैश करता है।

import React, { useMemo } from 'react';

// React.memo - memoize component
const ExpensiveList = React.memo(({ items }) => {
  return <ul>
    {items.map(item =>
      <li key={item.id}>{item.name}</li>
    )}
  </ul>;
});

// useMemo - caching result
function Dashboard({ transactions }) {
  const summary = useMemo(() => {
    return transactions.reduce((acc, t) => acc + t.amount, 0);
  }, [transactions]);

  return <p>Total: {summary}</p>;
}

useCallback कॉलबैक फ़ंक्शन को मेमोइज़ करता है ताकि वे हर रेंडर पर पुन: निर्मित न हों। यह React.memo में लिपटे चाइल्ड कम्पोनेंट्स को फ़ंक्शन पास करते समय महत्वपूर्ण है: useCallback के बिना, चाइल्ड कम्पोनेंट हर बार पुन: रेंडर होगा क्योंकि फ़ंक्शन रेफरेंस बदलता है।

फंक्शनल बनाम क्लास कम्पोनेंट्स

दृष्टिकोणों के बीच अंतर सिंटैक्स से परे है। फंक्शनल कम्पोनेंट्स क्लोज़र हैं: स्टेट और इफेक्ट एक विशिष्ट रेंडर से बंधे होते हैं। क्लास कम्पोनेंट्स this का उपयोग करते हैं: स्टेट हमेशा this.state से लिया जाता है, जो एसिंक्रोनस कॉलबैक निष्पादित होने तक पुराना हो सकता है।

फंक्शनल कम्पोनेंट्स एक रेखीय निष्पादन प्रवाह प्रदान करते हैं। क्लास कम्पोनेंट में, संबंधित लॉजिक अक्सर कई लाइफसाइकिल मेथड्स में बिखरा होता है। उदाहरण के लिए, WebSocket सब्सक्रिप्शन componentDidMount में सेट किया जाता है और componentWillUnmount में हटाया जाता है। फंक्शनल कम्पोनेंट में, दोनों ऑपरेशन एक ही useEffect में रिटर्न क्लीनअप फ़ंक्शन के साथ होते हैं।

TypeScript और फंक्शनल कम्पोनेंट्स

TypeScript क्लास की तुलना में फंक्शनल कम्पोनेंट्स के साथ अधिक स्वाभाविक रूप से काम करता है। Props टाइपिंग — फ़ंक्शन तर्क के लिए एक इंटरफ़ेस। रिटर्न प्रकार JSX.Element या ReactNode है। useState प्रारंभिक मान से प्रकार स्वचालित रूप से अनुमान लगाता है।

import React, { useState } from 'react';

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  onClick: () => void;
}

const Button: React.FC<ButtonProps> =
  ({ label, variant = 'primary', onClick }) => (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );

आधुनिक TypeScript विभेदित यूनियन प्रकारों के साथ useReducer टाइप करने, कस्टम हुक्स में जेनेरिक्स, और React.PropsWithChildren के माध्यम से सख्त चिल्ड्रन सत्यापन की अनुमति देता है। TypeScript के साथ फंक्शनल कम्पोनेंट्स बिना अतिरिक्त एब्स्ट्रैक्शन के पूर्ण प्रकार सुरक्षा प्रदान करते हैं।