HOC এর মাধ্যমে Code Reusability এবং Component Logic শেয়ার করা

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 কম্পোনেন্টে কোড ডুপ্লিকেশন কমায় এবং কম্পোনেন্টের মধ্যে কার্যকরী লজিক ভেঙে ফেলার সুযোগ দেয়।