ReactJS এ Reusable Components এবং HOC (Higher-Order Components)

Reusable Components

Reusable Components হল এমন React কম্পোনেন্ট, যেগুলো একবার তৈরি করলে পুনরায় বিভিন্ন স্থানে ব্যবহার করা যায়। এগুলো সাধারণত একটি নির্দিষ্ট কাজ বা UI অংশের জন্য তৈরি হয়, এবং বিভিন্ন ইনপুট (props) দিয়ে তাদের আচরণ কাস্টমাইজ করা যায়।

React-এ reusability হল একটি গুরুত্বপূর্ণ ধারণা, কারণ এটি কোড রিপিটিশন কমায় এবং অ্যাপ্লিকেশন ডেভেলপমেন্ট সহজ করে।

Reusable Components তৈরি করার পদ্ধতি:

1. Props ব্যবহার করুন: কম্পোনেন্টের ভিন্ন ভিন্ন কেসের জন্য props ব্যবহার করতে পারেন, যাতে কম্পোনেন্টটি ফ্লেক্সিবল এবং পুনঃব্যবহারযোগ্য হয়।
2. স্টাইলিং: স্টাইলিং ও কাস্টম UI প্যারামিটার হিসেবে props বা CSS কনফিগারেশনের মাধ্যমে করা যেতে পারে।

উদাহরণ:

const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

const App = () => {
  const handleClick = () => alert('Button clicked!');

  return (
    <div>
      <Button label="Click Me" onClick={handleClick} />
      <Button label="Submit" onClick={handleClick} />
    </div>
  );
};

এখানে:

• Button কম্পোনেন্টটি পুনঃব্যবহারযোগ্য, কারণ এটি label এবং onClick props গ্রহণ করছে, যেগুলো বিভিন্ন জায়গায় কাস্টমাইজ করা যাবে।
• Button কম্পোনেন্টটি একাধিক জায়গায় ব্যবহার করা সম্ভব।

Higher-Order Components (HOC)

Higher-Order Component (HOC) হল একটি প্যাটার্ন যা React-এ কম্পোনেন্টের লজিক পুনঃব্যবহার করতে ব্যবহৃত হয়। এটি একটি ফাংশন যা একটি কম্পোনেন্ট নেয় এবং সেই কম্পোনেন্টকে একটি নতুন কম্পোনেন্টে রিটার্ন করে। HOC সাধারণত কম্পোনেন্টের মধ্যে একাধিক কমন লজিক ভাগাভাগি করতে ব্যবহৃত হয়।

HOC-এর মূল ধারণা হল কম্পোনেন্টের মধ্যে লজিক শেয়ার করা। এটি কম্পোনেন্টের স্টেট বা প্রপ্সের উপর কাজ করতে পারে, বা কম্পোনেন্টকে নতুন ফিচার অ্যাড করতে পারে।

HOC তৈরির মৌলিক কাঠামো:

const withEnhancement = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

এখানে, withEnhancement একটি HOC যা একটি কম্পোনেন্ট (WrappedComponent) নেয় এবং সেটিকে নতুন ফিচারসহ রিটার্ন করে।

উদাহরণ:

ধরা যাক, আমরা একটি HOC তৈরি করবো যা একটি কম্পোনেন্টে লোডিং স্টেট অ্যাড করবে।

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

// HOC যা কম্পোনেন্টের মধ্যে লোডিং স্টেট অ্যাড করবে
const withLoading = (WrappedComponent) => {
  return (props) => {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      setTimeout(() => {
        setLoading(false);
      }, 2000); // 2 সেকেন্ড পরে লোডিং স্টেট বন্ধ হবে
    }, []);

    if (loading) {
      return <div>Loading...</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

// একটি সাধারণ কম্পোনেন্ট
const UserProfile = ({ userName }) => {
  return <div>User Name: {userName}</div>;
};

// HOC দ্বারা UserProfile কম্পোনেন্টে লোডিং ফিচার যুক্ত করা হচ্ছে
const EnhancedUserProfile = withLoading(UserProfile);

const App = () => {
  return <EnhancedUserProfile userName="John Doe" />;
};

export default App;

এখানে:

• withLoading HOC একটি কম্পোনেন্ট নেয় (যেমন UserProfile) এবং তাতে লোডিং স্টেট যুক্ত করে। যখন লোডিং চলছে, তখন একটি লোডিং বার্তা দেখানো হয়। লোডিং শেষ হলে মূল UserProfile কম্পোনেন্ট রেন্ডার হয়।
• EnhancedUserProfile হচ্ছে সেই নতুন কম্পোনেন্ট যা UserProfile কম্পোনেন্টে HOC দ্বারা পরিবর্তিত হয়েছে।

HOC-এর সুবিধা:

1. লজিকের পুনঃব্যবহার: HOC দ্বারা একাধিক কম্পোনেন্টে একই লজিক পুনঃব্যবহার করা যায়, যেমন লোডিং স্টেট, অথেনটিকেশন চেক, ডেটা ফেচিং ইত্যাদি।
2. কম্পোনেন্টের বিচ্ছিন্নতা বজায় রাখা: HOC কম্পোনেন্টের লজিক অ্যাবস্ট্রাক্ট করে, যার ফলে মূল কম্পোনেন্টগুলি ক্লিন এবং সহজ থাকে।
3. রিইউজেবিলিটি: HOC পুনঃব্যবহারযোগ্য হতে পারে, তাই একবার তৈরি করলে এটি অন্য কম্পোনেন্টে ব্যবহৃত হতে পারে।

HOC এবং Render Props এর মধ্যে পার্থক্য:

সারাংশ

• Reusable Components হল React কম্পোনেন্ট যা একবার তৈরি করে পুনরায় ব্যবহৃত হতে পারে। এতে props ব্যবহার করে UI কাস্টমাইজ করা হয়।
• Higher-Order Components (HOC) হল এমন একটি প্যাটার্ন যা কম্পোনেন্টের লজিক পুনঃব্যবহার করতে সাহায্য করে। HOC একটি কম্পোনেন্ট নেয় এবং সেটিকে নতুন ফিচার সহ রিটার্ন করে।
• HOC এবং Reusable Components দুইটি একে অপরের পরিপূরক হিসেবে কাজ করে এবং React অ্যাপ্লিকেশনকে আরও সুসংগঠিত ও পুনঃব্যবহারযোগ্য করে তোলে।

ReactJS-এ Reusable Components (পুনঃব্যবহারযোগ্য কম্পোনেন্ট) তৈরি করা একটি গুরুত্বপূর্ণ কৌশল, যা আপনার অ্যাপ্লিকেশনকে আরও মডুলার এবং স্কেলেবল করে তোলে। Reusable Components এর মাধ্যমে আপনি একবার তৈরি করা কম্পোনেন্টকে বিভিন্ন জায়গায় ব্যবহার করতে পারেন, ফলে কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায় এবং মেইন্টেন্যান্স সহজ হয়।

এখানে আমরা Reusable Components তৈরি এবং ব্যবহারের জন্য কিছু পদ্ধতি আলোচনা করবো।

Reusable Component কী?

Reusable Component হল এমন একটি React কম্পোনেন্ট যা একবার তৈরি করার পর বিভিন্ন পরিস্থিতিতে এবং বিভিন্ন ডাটা দিয়ে পুনঃব্যবহার করা যায়। সাধারণত, Reusable Components স্টেট, প্রপস, এবং ফাংশনালিটি দ্বারা কাস্টমাইজযোগ্য হয়। এটি একটি উপাদানকে বারবার ব্যবহার করতে সক্ষম করে, তাই কোডের ডুপ্লিকেশন কমে এবং অ্যাপ্লিকেশনটির মেইন্টেন্যান্স সহজ হয়।

Reusable Component তৈরি করার নিয়ম

১. কম্পোনেন্টের মধ্যে প্রপস (Props) ব্যবহার করা

React-এ প্রপস (Props) ব্যবহার করে আপনি কম্পোনেন্টের মধ্যে ডাটা পাঠাতে পারেন। একটি Reusable Component সাধারণত প্রপসের মাধ্যমে কাস্টমাইজ করা হয়। এটি ব্যবহারকারীর ইনপুট বা ডাটা অনুযায়ী কম্পোনেন্টটির কার্যক্রম বা আউটপুট পরিবর্তন করতে সক্ষম।

উদাহরণ: Button কম্পোনেন্ট

ধরা যাক, আপনি একটি Button কম্পোনেন্ট তৈরি করতে চান, যা বিভিন্ন স্টাইল, টেক্সট, এবং কার্যক্রম গ্রহণ করবে:

import React from 'react';

// Reusable Button Component
const Button = ({ text, onClick, style }) => {
  return (
    <button onClick={onClick} style={style}>
      {text}
    </button>
  );
};

export default Button;

এখানে, Button কম্পোনেন্টটি text, onClick, এবং style প্রপস গ্রহণ করছে, যা প্রতিটি ইনস্ট্যান্সের জন্য আলাদা হতে পারে।

২. Reusable Components-এর জন্য ডিফল্ট প্রপস (Default Props) সেট করা

যদি আপনি চান যে কোনো প্রপস প্রদান না করা হলে কিছু ডিফল্ট মান ব্যবহার করা হোক, তবে আপনি defaultProps ব্যবহার করতে পারেন।

Button.defaultProps = {
  text: 'Click Me',
  style: { backgroundColor: 'blue', color: 'white' }
};

এটি এমনভাবে কাজ করবে যে যদি Button কম্পোনেন্টে text বা style প্রপস না দেওয়া হয়, তবে এগুলোর ডিফল্ট মান ব্যবহার হবে।

৩. Conditional Rendering ব্যবহার করা

একটি Reusable Component সাধারণত ভিন্ন ভিন্ন ইনপুটের জন্য বিভিন্ন আউটপুট প্রদান করতে পারে। এর জন্য conditional rendering ব্যবহার করা হয়। React-এ, আপনি if, ternary operators বা switch ব্যবহার করে বিভিন্ন কন্ডিশন অনুযায়ী কম্পোনেন্টের আউটপুট কাস্টমাইজ করতে পারেন।

উদাহরণ: Alert কম্পোনেন্ট

ধরা যাক, আপনি একটি Alert কম্পোনেন্ট তৈরি করতে চান, যা সফলতা, সতর্কতা এবং ত্রুটির জন্য বিভিন্ন স্টাইল এবং টেক্সট দেখাবে।

import React from 'react';

const Alert = ({ type, message }) => {
  const getAlertStyle = () => {
    switch (type) {
      case 'success':
        return { backgroundColor: 'green', color: 'white' };
      case 'warning':
        return { backgroundColor: 'yellow', color: 'black' };
      case 'error':
        return { backgroundColor: 'red', color: 'white' };
      default:
        return { backgroundColor: 'gray', color: 'white' };
    }
  };

  return (
    <div style={getAlertStyle()}>
      <p>{message}</p>
    </div>
  );
};

export default Alert;

এখানে Alert কম্পোনেন্টটি type এবং message প্রপস গ্রহণ করে। type এর ভিত্তিতে এটি বিভিন্ন স্টাইল এবং বার্তা প্রদর্শন করে।

Reusable Component ব্যবহারের নিয়ম

১. Reusable Components ব্যবহার করা

একবার একটি কম্পোনেন্ট তৈরি করলে, আপনি সেটি অ্যাপ্লিকেশনের যেকোনো জায়গায় পুনঃব্যবহার করতে পারেন। পুনঃব্যবহারের জন্য আপনাকে শুধু উপযুক্ত প্রপস পাঠাতে হবে।

উদাহরণ: Button কম্পোনেন্ট ব্যবহার করা

import React from 'react';
import Button from './Button';

const App = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <h1>Reusable Components in React</h1>
      <Button text="Submit" onClick={handleClick} style={{ backgroundColor: 'green' }} />
      <Button text="Cancel" onClick={handleClick} style={{ backgroundColor: 'red' }} />
    </div>
  );
};

export default App;

এখানে, Button কম্পোনেন্ট দুটি আলাদা প্রপস দিয়ে ব্যবহার করা হয়েছে। একটির টেক্সট "Submit" এবং অন্যটির টেক্সট "Cancel"।

২. Reusable Component এর সাথে Form Handling

আপনি যদি একটি ফর্ম তৈরি করতে চান, তবে আপনি Reusable Input Components তৈরি করতে পারেন যা বিভিন্ন ধরণের ইনপুট গ্রহণ করতে পারে।

import React, { useState } from 'react';

// Reusable Input Component
const Input = ({ label, type, value, onChange }) => (
  <div>
    <label>{label}</label>
    <input type={type} value={value} onChange={onChange} />
  </div>
);

const Form = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <form>
      <Input label="Name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <Input label="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

এখানে, Input কম্পোনেন্টটি একটি পুনঃব্যবহারযোগ্য ইনপুট ফিল্ড তৈরি করেছে, যা ফর্মের জন্য name এবং email ইনপুট দুটি গ্রহণ করছে।

ReactJS-এ Reusable Components তৈরি এবং ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি করতে পারেন, কোড ডুপ্লিকেশন কমাতে পারেন, এবং অ্যাপ্লিকেশনটির মেইন্টেন্যান্স আরও সহজ করতে পারেন। React-এ প্রপস, স্টেট, কন্ডিশনাল রেন্ডারিং এবং কম্পোনেন্ট ডিজাইন প্যাটার্ন ব্যবহার করে আপনি এমন কম্পোনেন্ট তৈরি করতে পারবেন যা বিভিন্ন পরিস্থিতিতে ব্যবহার করা যায়।

Higher-Order Component (HOC) একটি প্যাটার্ন যা React অ্যাপ্লিকেশনের কম্পোনেন্টে পুনঃব্যবহারযোগ্য লজিক এবং আচরণ (behavior) ইনজেক্ট করার জন্য ব্যবহৃত হয়। এটি একটি ফাংশন যা একটি কম্পোনেন্ট গ্রহণ করে এবং একটি নতুন কম্পোনেন্ট রিটার্ন করে। HOC মূলত একটি কম্পোনেন্ট নয়, বরং একটি ফাংশন যা অন্যান্য কম্পোনেন্টকে বর্ধিত (enhance) করে।

HOC-র ব্যবহার সাধারণত কম্পোনেন্টের মধ্যে শেয়ারযোগ্য লজিক লিখতে, স্টেট বা অথরাইজেশন চেক করতে বা প্লাগইন সিস্টেম তৈরি করতে হয়ে থাকে।

১. HOC কী?

HOC হলো একটি ফাংশন যা একটি কম্পোনেন্ট নেয় এবং সেটির উপর নতুন ফিচার বা আচরণ যুক্ত করে আবার একটি নতুন কম্পোনেন্ট রিটার্ন করে। এটি সাধারণত কম্পোনেন্টের বাইরে স্টেট বা প্রপসের কাজ করতে ব্যবহৃত হয় এবং সাধারণত অ্যাপ্লিকেশনের গ্লোবাল বা শেয়ারযোগ্য ফিচারগুলোকে একাধিক কম্পোনেন্টে শেয়ার করতে ব্যবহৃত হয়।

HOC এর কাঠামো:

function withSomeLogic(WrappedComponent) {
  return function EnhancedComponent(props) {
    // এখানে কিছু লজিক যুক্ত করা যায়

    return <WrappedComponent {...props} />;
  };
}

এখানে, withSomeLogic একটি HOC যা একটি কম্পোনেন্ট নেয় (যেমন WrappedComponent) এবং তার উপর কিছু অতিরিক্ত লজিক প্রয়োগ করে একটি নতুন কম্পোনেন্ট রিটার্ন করে (EnhancedComponent)।

২. HOC এর উদাহরণ

একটি সাধারণ উদাহরণ হলো একটি HOC যা একটি কম্পোনেন্টে লগ ইন চেক করে এবং একটি লগিন প্রটেক্টেড পেজে অ্যাক্সেস দেয়।

HOC উদাহরণ:

import React from 'react';

// HOC: withAuth
function withAuth(WrappedComponent) {
  return function EnhancedComponent(props) {
    // এখানে, আমরা চেক করছি ব্যবহারকারী লগইন করেছেন কিনা
    const isAuthenticated = false; // এখানে আপনি আসল অথেনটিকেশন চেক করতে পারেন

    if (!isAuthenticated) {
      return <div>Please log in to access this content.</div>;
    }

    return <WrappedComponent {...props} />;
  };
}

export default withAuth;

এখানে, withAuth একটি HOC যা WrappedComponent হিসেবে একটি কম্পোনেন্ট গ্রহণ করে এবং লগইন চেকের মাধ্যমে নির্ধারণ করে যে কম্পোনেন্টটি প্রদর্শন করা হবে নাকি ব্যবহারকারীকে লগইন করতে বলা হবে।

HOC ব্যবহার:

import React from 'react';
import withAuth from './withAuth';

function ProtectedPage() {
  return <div>Welcome to the protected page!</div>;
}

export default withAuth(ProtectedPage); // HOC প্রয়োগ

এখানে, ProtectedPage কম্পোনেন্টে withAuth HOC প্রয়োগ করা হয়েছে, যা স্বয়ংক্রিয়ভাবে লগইন চেক করবে এবং যদি ব্যবহারকারী লগইন না করেন, তাহলে একটি মেসেজ দেখাবে।

৩. HOC এর সুবিধা

• কোড পুনঃব্যবহারযোগ্যতা: HOC আপনি একবার লিখে একাধিক কম্পোনেন্টে ব্যবহার করতে পারেন, ফলে কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায়।
• আনকপ্লেক্স লজিক: কম্পোনেন্ট লজিক এবং বৈশিষ্ট্যগুলিকে আলাদা করে রাখা যায়, এতে কোড আরো পরিষ্কার ও সুসংগঠিত হয়।
• স্টেট ও প্রপস পরিচালনা: HOC কম্পোনেন্টে স্টেট ও প্রপস পরিচালনা করতে পারে, যেমন: ফর্মের ইনপুট ভ্যালিডেশন বা API কলের ফলাফল প্রক্রিয়া।

৪. HOC এর সীমাবদ্ধতা

• প্রপার্টি ড্রিলিং: একাধিক HOC প্রয়োগ করলে কম্পোনেন্টের প্রপসগুলির উপর প্রভাব পড়তে পারে, যার ফলে প্রপস ড্রিলিংয়ের সমস্যা হতে পারে (অর্থাৎ, একটি প্রপস একাধিক লেয়ার জুড়ে প্রেরণ করতে হয়)।
• স্ট্যাটিক মেথডস: HOC দ্বারা তৈরি কম্পোনেন্টগুলিতে মূল কম্পোনেন্টের স্ট্যাটিক মেথডস (যেমন displayName, propTypes, getInitialProps ইত্যাদি) হারিয়ে যেতে পারে।
• ডিবাগিংয়ে সমস্যা: HOC দ্বারা তৈরি কম্পোনেন্টগুলো অনেক সময় ডিবাগ করতে কঠিন হতে পারে, কারণ এগুলোর নাম (displayName) বা স্টেট পছন্দমত নির্ধারণ করা হয় না।

৫. HOC এর বিকল্প: React Hooks

React 16.8-এ Hooks ফিচার যুক্ত হওয়ার পর, অনেক সময় HOC-এর ব্যবহার কমে গেছে, কারণ hooks কম্পোনেন্টের মধ্যে শেয়ারযোগ্য লজিক পরিচালনা করতে আরও সরল এবং কার্যকরী পদ্ধতি প্রদান করে।

উদাহরণস্বরূপ, useState এবং useEffect hooks ব্যবহার করে কম্পোনেন্টের মধ্যে লজিক শেয়ার করা যায়, যা পূর্বে HOC-এর মাধ্যমে করা হত। Hooks এর মাধ্যমে কম্পোনেন্টের পুনঃব্যবহারযোগ্যতা এবং স্টেট ব্যবস্থাপনা সহজ হয়।

সারাংশ

Higher-Order Component (HOC) React-এর একটি শক্তিশালী প্যাটার্ন, যা একটি কম্পোনেন্টের আচরণ বর্ধিত করতে এবং পুনঃব্যবহারযোগ্য লজিক তৈরি করতে ব্যবহৃত হয়। HOC ব্যবহার করে আপনি কম্পোনেন্টে সাধারণ বা শেয়ারযোগ্য লজিক ইন্টিগ্রেট করতে পারেন, তবে বর্তমানে React Hooks এর আবির্ভাবের সাথে HOC এর ব্যবহার কিছুটা কমেছে। HOC এবং React Hooks দুটোই React অ্যাপ্লিকেশনের মধ্যে কোড পুনঃব্যবহারযোগ্যতা এবং পরিষ্কারতা নিশ্চিত করতে সাহায্য করে।

ReactJS-এ Higher Order Components (HOC) হল এমন একটি প্যাটার্ন যা কম্পোনেন্টের রিইউজেবল লজিক শেয়ার করতে ব্যবহৃত হয়। HOC একটি ফাংশন যা একটি কম্পোনেন্টকে ইনপুট হিসেবে নিয়ে একটি নতুন কম্পোনেন্ট রিটার্ন করে, যা মূল কম্পোনেন্টের কিছু অতিরিক্ত ফিচার বা লজিক যুক্ত করে।

HOC কী?

Higher Order Component (HOC) হল একটি ফাংশন যা অন্য একটি কম্পোনেন্টকে আর্গুমেন্ট হিসেবে নেয় এবং তাকে নতুন কম্পোনেন্টে রূপান্তরিত করে। HOC-এর মাধ্যমে আপনি কোড পুনঃব্যবহারযোগ্যতা (reusability) এবং কম্পোনেন্ট লজিক শেয়ারিং অর্জন করতে পারেন, কারণ একাধিক কম্পোনেন্টে একই লজিক প্রয়োগ করা সম্ভব হয়।

HOC সাধারণত কম্পোনেন্টের স্টেট, প্রপ্স বা অন্যান্য ফিচার (যেমন ফিচার ফ্ল্যাগ, অ্যাকাউন্ট অ্যাক্সেস, হাইডেড ডেটা ইত্যাদি) ম্যানেজ করার জন্য ব্যবহৃত হয়।

HOC এর উপকারিতা

1. কোড রিইউজযোগ্যতা (Code Reusability): একাধিক কম্পোনেন্টে একই লজিক ব্যবহার করা যায়, তাই কোড পুনঃব্যবহারযোগ্য হয়।
2. কম্পোনেন্ট সিকিউরিটি (Component Separation): কম্পোনেন্ট লজিককে আলাদা করে রাখা যায়, যাতে প্রপ্স বা স্টেট ব্যবস্থাপনা সহজ হয়।
3. অ্যাবস্ট্রাকশন (Abstraction): আপনার কম্পোনেন্টের লজিক হালকা ও পোর্টেবল থাকে, কারণ কম্পোনেন্টের ইন্টিগ্রেশন বা লজিক পরিবর্তন করার সময় মূল কম্পোনেন্টের কোডে পরিবর্তন করতে হয় না।
4. রেডুসড কোড রিপিটিশন (Reduced Code Duplication): একাধিক কম্পোনেন্টে একই লজিক প্রয়োগ করতে গিয়ে কোড ডুপ্লিকেশন কমে যায়।

HOC কিভাবে কাজ করে?

HOC তৈরি করার জন্য একটি ফাংশন তৈরি করতে হয়, যা একটি কম্পোনেন্টকে ইনপুট হিসেবে নিয়ে তাকে রিটার্ন করবে। এখানে একটি সহজ উদাহরণ দেওয়া হলো:

HOC উদাহরণ:

ধরা যাক, আমরা একটি HOC তৈরি করতে চাই যেটি একটি কম্পোনেন্টকে একটি লোডিং স্টেট প্রদান করবে। যখন ডেটা লোড হচ্ছে, তখন আমরা একটি লোডিং ইন্ডিকেটর দেখাবো এবং ডেটা লোড হওয়ার পর মূল কন্টেন্ট দেখাবো।

withLoading.js (HOC):

import React from 'react';

const withLoading = (WrappedComponent) => {
  return (props) => {
    if (props.isLoading) {
      return <div>Loading...</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

export default withLoading;

এখানে withLoading একটি HOC যা একটি কম্পোনেন্টকে ইনপুট হিসেবে নিয়ে, তার মধ্যে লোডিং লজিক যোগ করবে। যদি isLoading প্রপ্স true হয়, তাহলে এটি একটি লোডিং টেক্সট দেখাবে। অন্যথায়, এটি মূল কম্পোনেন্টকে রেন্ডার করবে।

HOC ব্যবহার করা

এখন, আমরা একটি সাধারণ কম্পোনেন্ট তৈরি করবো এবং সেই কম্পোনেন্টে withLoading HOC ব্যবহার করবো।

UserProfile.js:

import React, { useState, useEffect } from 'react';
import withLoading from './withLoading';

const UserProfile = ({ user, isLoading }) => {
  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};

// HOC এর মাধ্যমে UserProfile কম্পোনেন্টে লোডিং ফিচার যোগ করা
export default withLoading(UserProfile);

App.js:

import React, { useState, useEffect } from 'react';
import UserProfile from './UserProfile';

const App = () => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setUser({ name: 'John Doe', email: 'john@example.com' });
      setIsLoading(false);
    }, 2000); // 2 সেকেন্ড পর ডেটা লোড হবে
  }, []);

  return (
    <div>
      <UserProfile user={user} isLoading={isLoading} />
    </div>
  );
};

export default App;

HOC এর মাধ্যমে Logic শেয়ার করা

এছাড়া, আপনি একাধিক HOC ব্যবহার করে আরও কম্পোনেন্ট লজিক শেয়ার করতে পারেন। যেমন, যদি আপনি একটি HOC তৈরি করেন যা কম্পোনেন্টের প্রপ্স থেকে কাস্টম পারামিটার গুলো গ্রহণ করে এবং সেই অনুযায়ী কিছু শর্ত নির্ধারণ করে, তাহলে তা অনেকগুলো কম্পোনেন্টে ব্যবহার করা যাবে।

উদাহরণ: withAuth.js HOC

const withAuth = (WrappedComponent) => {
  return (props) => {
    if (!props.isAuthenticated) {
      return <div>Please log in to view this content.</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

এখানে withAuth HOC একটি প্রপ্স হিসেবে isAuthenticated চেক করবে এবং যদি ব্যবহারকারী অথেন্টিকেটেড না হয়, তাহলে তাকে লগ ইন করতে বলবে। অন্যথায়, এটি মূল কম্পোনেন্ট রেন্ডার করবে।

এভাবে, HOC ব্যবহার করে আপনি React অ্যাপ্লিকেশনে লজিক শেয়ার এবং কোড পুনঃব্যবহার করতে পারেন, যা অ্যাপ্লিকেশনকে আরও স্কেলেবল ও মেইনটেনেবল করে তোলে।

সারাংশ

• Higher Order Components (HOC) হল একটি প্যাটার্ন যা React কম্পোনেন্টের মধ্যে কোড রিইউজেবলিটি এবং লজিক শেয়ারিং সহজ করে।
• HOC একটি ফাংশন যা একটি কম্পোনেন্টকে ইনপুট হিসেবে নিয়ে নতুন কম্পোনেন্ট তৈরি করে।
• HOC সাধারণত কম্পোনেন্ট লজিক, স্টেট বা অন্যান্য ফিচার শেয়ার করার জন্য ব্যবহৃত হয়।
• এটি React কম্পোনেন্টে কোড ডুপ্লিকেশন কমায় এবং কম্পোনেন্টের মধ্যে কার্যকরী লজিক ভেঙে ফেলার সুযোগ দেয়।

ReactJS-এ Higher Order Components (HOC) এবং Render Props দুটি জনপ্রিয় প্যাটার্ন, যা কম্পোনেন্টের মধ্যে পুনঃব্যবহারযোগ্য কোড শেয়ার করার জন্য ব্যবহৃত হয়। যদিও এই দুটি প্যাটার্নের উদ্দেশ্য এক, তবে এগুলির কাজ করার পদ্ধতি এবং ব্যবহার কিছুটা ভিন্ন।

এখানে, আমরা HOC এবং Render Props এর মধ্যে পার্থক্য এবং তাদের ব্যবহার নিয়ে বিস্তারিত আলোচনা করব।

Higher Order Component (HOC)

Higher Order Component (HOC) হল একটি ফাংশন যা একটি কম্পোনেন্ট গ্রহণ করে এবং তাকে আরও এক বা একাধিক কম্পোনেন্ট দিয়ে রেন্ডার করে। এটি একটি পুনঃব্যবহারযোগ্য লজিক তৈরি করতে সাহায্য করে, যা একটি কম্পোনেন্টে অন্তর্ভুক্ত করা যেতে পারে।

HOC এর বৈশিষ্ট্য:

• কম্পোনেন্টকে প্যারামিটার হিসেবে গ্রহণ করে: HOC একটি কম্পোনেন্ট গ্রহণ করে এবং নতুন কম্পোনেন্ট রিটার্ন করে।
• প্রোপস পরিবর্তন করে: HOC কম্পোনেন্টের প্রোপস বদলাতে বা অতিরিক্ত ফাংশনালিটি যোগ করতে পারে।
• স্টেট, লজিক এবং ফাংশন শেয়ার করতে ব্যবহৃত হয়: এটি পুনঃব্যবহারযোগ্য লজিক এবং ডেটা শেয়ার করতে ব্যবহৃত হয়।

HOC এর উদাহরণ:

import React from 'react';

// HOC ফাংশন
function withLogging(WrappedComponent) {
  return function (props) {
    console.log('Rendering component:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

// মূল কম্পোনেন্ট
function MyComponent() {
  return <h1>Hello, World!</h1>;
}

// HOC ব্যবহার
const MyComponentWithLogging = withLogging(MyComponent);

export default MyComponentWithLogging;

এখানে, withLogging একটি HOC যা MyComponent কে গ্রহণ করে এবং তা রেন্ডার করার আগে কম্পোনেন্টের নাম কনসোলে লগ করে।

Render Props

Render Props হল একটি প্যাটার্ন যেখানে একটি কম্পোনেন্ট একটি ফাংশন পাস করে, যা রেন্ডার করার সময় তার UI তৈরি করতে ব্যবহৃত হয়। সাধারণত, এই ফাংশনটি কম্পোনেন্টের ভিতরে ডেটা বা স্টেট পাস করে, এবং এর মাধ্যমে UI কাস্টমাইজ করা হয়।

Render Props এর বৈশিষ্ট্য:

• ফাংশন পাস করা হয়: Render Props-এ কম্পোনেন্ট একটি ফাংশন পাস করে, যা UI রেন্ডার করার সময় ডেটা গ্রহণ করে।
• ডেটা এবং স্টেট শেয়ার করা হয়: এটি স্টেট, ডেটা, বা লজিক শেয়ার করতে ব্যবহৃত হয়, এবং রেন্ডার করার জন্য UI কাস্টমাইজ করা যায়।
• স্টেট নিয়ন্ত্রণে সুবিধা: Render Props স্টেট নিয়ন্ত্রণ করতে এবং সেই স্টেটের ভিত্তিতে UI পরিবর্তন করতে সহজ উপায় সরবরাহ করে।

Render Props এর উদাহরণ:

import React, { useState } from 'react';

// Render Props ব্যবহারকারী কম্পোনেন্ট
function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return (
    <div onMouseMove={handleMouseMove}>
      {render(position)} {/* render প্রোপস পাস করা */}
    </div>
  );
}

// মূল কম্পোনেন্ট
function App() {
  return (
    <MouseTracker
      render={(position) => (
        <h1>Mouse position: {position.x}, {position.y}</h1>
      )}
    />
  );
}

export default App;

এখানে, MouseTracker কম্পোনেন্ট একটি render ফাংশন পাস করে, যা মাউসের অবস্থান রেন্ডার করার জন্য UI তৈরি করে।

HOC এবং Render Props এর মধ্যে তুলনা

কোনটি কখন ব্যবহার করবেন?

• HOC ব্যবহার করুন: যখন আপনি একাধিক কম্পোনেন্টে পুনঃব্যবহারযোগ্য লজিক, স্টেট বা ফাংশন শেয়ার করতে চান। HOC আপনাকে একাধিক কম্পোনেন্টে একই লজিক বা স্টেট প্রয়োগ করতে সাহায্য করে।
• Render Props ব্যবহার করুন: যখন আপনি একটি কম্পোনেন্টের ভিতরে ডেটা বা স্টেট শেয়ার করতে চান এবং UI রেন্ডার করার জন্য কাস্টমাইজড ফাংশন ব্যবহার করতে চান।

এছাড়া, আপনি কখনও কখনও HOC এবং Render Props দুটোই একসঙ্গে ব্যবহার করতে পারেন, তবে লক্ষ্য রাখতে হবে কোন প্যাটার্নটি আপনার ক্ষেত্রে বেশি সুবিধাজনক।