React میں فنکشنل کمپونینٹ — جدید ترقی کا معیار

Functional Component کیا ہے؟

Functional Component ایک React کمپونینٹ ہے جو ایک فنکشن کے طور پر بیان کیا گیا ہے، جو ایک props آبجیکٹ قبول کرتا ہے اور ایک React عنصر لوٹاتا ہے۔ React 16.8 سے پہلے، ایسے کمپونینٹ کو اسٹیٹ لیس کہا جاتا تھا کیونکہ وہ اندرونی اسٹیٹ کا نظم نہیں کر سکتے تھے۔

React 16.8 (فروری 2019) میں ہکس کی آمد کے ساتھ، فنکشنل کمپونینٹ کو اسٹیٹ (useState)، ضمنی اثرات (useEffect)، سیاق و سباق (useContext) اور ریف (useRef) تک رسائی مل گئی۔ ‘اسٹیٹ لیس’ کی اصطلاح متروک ہو گئی ہے — جدید فنکشنل کمپونینٹ اسٹیٹ کو مکمل طور پر منظم کرتے ہیں۔

React سرکاری طور پر فنکشنل کمپونینٹ کو کمپونینٹ بنانے کا بنیادی طریقہ تجویز کرتا ہے۔ react.dev پر تمام دستاویزات، مثالیں، ٹیوٹوریلز اور نئے APIs (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 کے سلاٹس کا مشابہ نامزد کمپونینٹ 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 کے بغیر، چائلڈ کمپونینٹ ہر بار دوبارہ رینڈر ہوگا کیونکہ فنکشن ریفرنس بدل جاتا ہے۔

فنکشنل بمقابلہ کلاس کمپونینٹ

طریقوں کے درمیان فرق نحو سے باہر ہے۔ فنکشنل کمپونینٹ closure ہیں: اسٹیٹ اور اثرات ایک مخصوص رینڈر سے منسلک ہوتے ہیں۔ کلاس کمپونینٹ 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 کے ساتھ فنکشنل کمپونینٹ اضافی تجرید کے بغیر مکمل قسم کی حفاظت فراہم کرتے ہیں۔