Component Composition এবং Reusability

ReactJS-এ Component Composition এবং Reusability গুরুত্বপূর্ণ ধারণা যা অ্যাপ্লিকেশন ডিজাইন এবং ডেভেলপমেন্টের জন্য খুবই কার্যকর। React-এর শক্তিশালী কম্পোনেন্ট ভিত্তিক আর্কিটেকচার আপনাকে একই UI এলিমেন্ট বা লজিক বারবার ব্যবহার করার সুবিধা দেয়। এই ধারণাগুলির মাধ্যমে আপনি ছোট, সহজ এবং পুনঃব্যবহারযোগ্য কম্পোনেন্ট তৈরি করতে পারেন, যা অ্যাপ্লিকেশনের স্কেল বাড়ানোর সময় খুবই উপকারী।

১. Component Composition (কম্পোনেন্ট কম্পোজিশন)

Component Composition হল React কম্পোনেন্টগুলোকে একে অপরের মধ্যে যোগ বা কম্বাইন করার প্রক্রিয়া। এর মাধ্যমে আমরা একটি মূল কম্পোনেন্টের মধ্যে ছোট ছোট কম্পোনেন্টগুলোকে সন্নিবেশ (nest) করতে পারি, যা খুবই কার্যকরী এবং ডেকুপলড (decoupled) কোড তৈরিতে সাহায্য করে।

Component Composition এর উদাহরণ:

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-content">{children}</div>
    </div>
  );
}

function App() {
  return (
    <div>
      <Card title="React Basics">
        <p>This is a card about React Basics.</p>
      </Card>
      <Card title="React Hooks">
        <p>This card contains info about React Hooks.</p>
      </Card>
    </div>
  );
}

এখানে, Card কম্পোনেন্টটি children prop গ্রহণ করে এবং সেটা সেই কম্পোনেন্টের মধ্যে রেন্ডার করে। এইভাবে, Card কম্পোনেন্টটি যেকোনো কনটেন্টের জন্য পুনঃব্যবহারযোগ্য এবং আপনি তার ভেতরে যেকোনো কনটেন্ট ইনজেক্ট করতে পারেন।

২. Reusability (পুনঃব্যবহারযোগ্যতা)

Reusability React কম্পোনেন্টের অন্যতম প্রধান সুবিধা। একবার যদি আপনি একটি কম্পোনেন্ট তৈরি করেন, তাহলে আপনি সহজেই সেটি অন্যান্য জায়গায় ব্যবহার করতে পারেন। এটি আপনাকে কোড ডুপ্লিকেশন থেকে বাঁচায় এবং বড় অ্যাপ্লিকেশনগুলোতে কোড ম্যানেজমেন্ট সহজ করে।

Reusability এর উদাহরণ:

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

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

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

এখানে, Button কম্পোনেন্টটি পুনঃব্যবহারযোগ্য। আমরা একে বিভিন্ন জায়গায় বিভিন্ন টেক্সট ও ফাংশন সহ ব্যবহার করতে পারি। এতে কোডের পুনঃব্যবহারযোগ্যতা বাড়ে এবং মেইনটেনেন্স সহজ হয়।

৩. Higher-Order Components (HOC) এবং Reusability

Higher-Order Components (HOC) হল একটি React Pattern যা একটি কম্পোনেন্টকে অন্য একটি কম্পোনেন্ট দিয়ে র‍্যাপ করে। এটি মূলত কম্পোনেন্টের লজিক পুনঃব্যবহার করার জন্য ব্যবহৃত হয়।

HOC এর উদাহরণ:

function withUserData(Component) {
  return function UserDataHOC(props) {
    const user = { name: 'John Doe', age: 30 };
    return <Component {...props} user={user} />;
  };
}

function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
    </div>
  );
}

const EnhancedUserProfile = withUserData(UserProfile);

function App() {
  return <EnhancedUserProfile />;
}

এখানে, withUserData একটি HOC যা UserProfile কম্পোনেন্টকে র‍্যাপ করে এবং তাকে ইউজারের ডেটা প্রদান করে। এইভাবে, আমরা একাধিক কম্পোনেন্টে একই লজিক পুনঃব্যবহার করতে পারি।

৪. Custom Hooks এবং Reusability

Custom Hooks হল React-এর একটি শক্তিশালী ফিচার যা আপনাকে লজিক ভাগাভাগি করতে দেয়। এটি ফাংশনাল কম্পোনেন্টে ব্যবহৃত হয় এবং বিভিন্ন কম্পোনেন্টে একই স্টেট এবং লজিক ব্যবহারের জন্য পুনঃব্যবহারযোগ্য হতে পারে।

Custom Hook এর উদাহরণ:

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return width;
}

function App() {
  const width = useWindowWidth();

  return (
    <div>
      <p>Window width is: {width}</p>
    </div>
  );
}

এখানে, useWindowWidth একটি custom hook যা উইন্ডোর প্রস্থ ট্র্যাক করে এবং এটা যেকোনো কম্পোনেন্টে পুনঃব্যবহারযোগ্য। এতে করে একই লজিক একাধিক জায়গায় ব্যবহার করা যায়।

সারাংশ

ReactJS-এ Component Composition এবং Reusability কম্পোনেন্টগুলোকে ছোট, ডেকুপলড এবং পুনঃব্যবহারযোগ্য করতে সাহায্য করে। এগুলি অ্যাপ্লিকেশনের মেইনটেনেবিলিটি উন্নত করে এবং কোড রিপিটিশন কমিয়ে দেয়। Component Composition ব্যবহার করে আপনি বিভিন্ন ছোট ছোট কম্পোনেন্ট তৈরি করতে পারেন যা একে অপরের সাথে মিশে একটি বড় UI তৈরি করবে, আর Reusability কম্পোনেন্ট এবং হুকস দ্বারা একে অপরের মধ্যে কোড পুনঃব্যবহার করে অ্যাপ্লিকেশনকে আরও স্কেলেবল এবং কার্যকরী করে তোলে।