Higher Order Components (HOC)

HOC হল একটি ফাংশন যা একটি Components নেয় এবং একটি নতুন Enhanced Components রিটার্ন করে।

HOC ব্যবহারের সুবিধা ?

• Code Reusability: রি-ইউজিবল লজিক আলাদা রাখা যায়।
• Separation of Concerns: লজিক ও UI আলাদা করা যায়।
• Props Manipulation: ইনপুট কম্পোনেন্টকে নতুন props যোগ করা যায়।
• Authentication Handling: ব্যবহারের পার্মিশন চেক করা যায়।
• Conditional Rendering: নির্দিষ্ট শর্ত অনুযায়ী UI চেঞ্জ করা যায়। বা বলতে পারি if else দিয়ে বা কনডিশনালি চেক করে আমরা চাইলে রি-ইউজ কিছু দেখাতে পারি ।

HOC এর মূল ধারনা

• এটি একটি কম্পোনেন্টকে ইনপুট হিসেবে নেয়।
• প্রয়োজনীয় লজিক অ্যাপ্লাই করে।
• একটি নতুন উন্নত কম্পোনেন্ট রিটার্ন করে।

HOC এর ক্ষেত্রে একটা কনভেনশন হল এর শুরু হবে with দিয়ে, যেমন আমরা hooks লিখে শুরুতে use দিয়ে , এভাবেই HOC এর ক্ষেত্রে with দেয়া একটা কনভেনশন হিসেবে ধরা হয় । যেমনঃ withUserData
যদিও React এর ক্ষেত্রে Hooks আসার পর থেকে HOC তেমন ব্যবহার হয় না কারণ আমরা HOC এর কাজ hooks ব্যবহার করে আরও সহজেই করতে পারি ।

HOC উদাহরণ

with-user-data.tsx

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

type User = {
  id: number;
  name: string;
  email: string;
  phone: string;
};

// HOC to fetch user data
const withUserData = <P extends object>(
  WrappedComponent: React.ComponentType<P & { users: User[] }>
) => {
  return (props: P) => {
    const [users, setUsers] = useState<User[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
      const fetchUsers = async () => {
        try {
          const response = await fetch(
            "https://jsonplaceholder.typicode.com/users"
          );
          if (!response.ok) {
            throw new Error("Failed to fetch users");
          }
          const data = await response.json();
          setUsers(data);
        } catch (err) {
          setError((err as Error).message);
        } finally {
          setLoading(false);
        }
      };

      fetchUsers();
    }, []);

    if (loading) return <p>Loading users...</p>;
    if (error) return <p>Error: {error}</p>;

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

UserContainer.tsx

const UserList = ({ users }: { users: User[] }) => {
  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <strong>{user.name}</strong> - {user.email} - {user.phone}
          </li>
        ))}
      </ul>
    </div>
  );
};

const UserListWithData = withUserData(UserList);

App.tsx

export default function App() {
  return (
    <div>
      <h1>React HOC Example - withUserData</h1>
      <UserListWithData />
    </div>
  );
}