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 সহ ফাংশনাল কম্পোনেন্টগুলি অতিরিক্ত অ্যাবস্ট্রাকশন ছাড়াই সম্পূর্ণ টাইপ সুরক্ষা প্রদান করে।