Custom Hook কী?

Custom Hook হচ্ছে React-এর এমন একটি ফাংশন যা শুরু হয় use দিয়ে এবং এর মধ্যে আমরা state, effect, এবং অন্যান্য React-এর ফিচার ব্যবহার করে লজিক তৈরি করি। এই হুক ব্যবহার করে আমরা বারবার ব্যবহৃত হওয়া লজিকগুলোকে আলাদা করতে পারি।

কেন Custom Hook প্রয়োজন?

React কম্পোনেন্ট লিখতে গেলে অনেক সময় দেখা যায়, একই রকমের লজিক বা ফিচার বারবার দরকার হয়। যদি প্রতিবার আলাদা করে এই লজিক লিখতে হয়, তাহলে:

1. কোড জটিল হয়ে যায়।
2. কোড মেইনটেন করা কঠিন হয়ে যায়।
3. রিইউজ করার ক্ষমতা নষ্ট হয়।

Custom Hook আমাদের এই সমস্যা থেকে বাঁচায়। এটি কোডকে পরিষ্কার ও পুনরায় ব্যবহারযোগ্য করে।

উদাহরণ দিয়ে ব্যাখ্যা: অনলাইন-অফলাইন স্ট্যাটাস চেক করা

সমস্যা:

ধরি, তোমার অ্যাপ ব্যবহারকারীর ইন্টারনেট কানেকশনের স্ট্যাটাস চেক করে। একাধিক জায়গায় একই লজিক দরকার। যদি একবার লজিক লিখে সেটাকে বিভিন্ন কম্পোনেন্টে ব্যবহার করা যেত, তাহলে কেমন হতো?

এটা সম্ভব Custom Hook দিয়ে। আমরা দেখবো কীভাবে এই সমস্যার সমাধান করা যায়।

ধাপ ১: কম্পোনেন্টে লজিক লিখি

প্রথমে আমরা একটা সাধারণ React কম্পোনেন্ট লিখি যেখানে ব্যবহারকারীর ইন্টারনেট কানেকশন চেক করা হবে।

import { useState, useEffect } from "react";
 
const StatusBar = () => {
  const [isOnline, setIsOnline] = useState(true); // ইন্টারনেট স্ট্যাটাস সংরক্ষণ
 
  useEffect(() => {
    // ইভেন্ট হ্যান্ডলার তৈরি
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
 
    // ইভেন্ট লিসেনার যুক্ত করা
    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);
 
    // ইভেন্ট লিসেনার সরিয়ে নেওয়া (ক্লিনআপ)
    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);
 
  return <div>{isOnline ? "✅ Online" : "❌ Disconnected"}</div>;
};
 
export default StatusBar;

ব্যাখ্যা:

1. useState: এখানে আমরা isOnline নামে একটি স্টেট ব্যবহার করছি, যা ব্যবহারকারীর অনলাইন বা অফলাইন অবস্থা সংরক্ষণ করে।
2. useEffect: এখানে আমরা ব্রাউজারের online ও offline ইভেন্টগুলোর মাধ্যমে ব্যবহারকারীর কানেকশন স্ট্যাটাস পরিবর্তন ট্র্যাক করছি।
3. Event Listener: window.addEventListener দিয়ে ইভেন্ট ট্র্যাক করা হচ্ছে।
4. Clean-up: return এর ভেতর আমরা ইভেন্ট লিসেনার সরিয়ে নিচ্ছি যাতে মেমরি লিক না হয়।

ধাপ ২: একই লজিক বারবার ব্যবহার না করে Custom Hook বানানো

এবার আমরা এই লজিকটাকে একটি Custom Hook-এ নিয়ে আসবো।

Custom Hook তৈরি

import { useState, useEffect } from "react";
 
export default function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
 
  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
 
    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);
 
    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);
 
  return isOnline; // অনলাইন অবস্থা রিটার্ন করা হচ্ছে
}

ব্যাখ্যা:

1. useState এবং useEffect: আগে যেভাবে কম্পোনেন্টে ব্যবহার করেছি, সেভাবেই হুকের ভেতর ব্যবহার করছি।
2. Reusable Logic: এখন যেকোনো কম্পোনেন্টে এই হুক ইম্পোর্ট করে সহজে ব্যবহার করা যাবে।

ধাপ ৩: Custom Hook ব্যবহার

এবার আমাদের আগের StatusBar কম্পোনেন্টে হুক ব্যবহার করে সহজ কোড লিখবো।

import useOnlineStatus from "./useOnlineStatus";
 
const StatusBar = () => {
  const isOnline = useOnlineStatus(); // Custom Hook দিয়ে স্ট্যাটাস বের করছি
 
  return <div>{isOnline ? "✅ Online" : "❌ Disconnected"}</div>;
};
 
export default StatusBar;

এবার তুমি চাইলে এই হুক অন্য কোনো কম্পোনেন্টেও একইভাবে ব্যবহার করতে পারবে।

আরেকটি উদাহরণ: কাউন্টডাউন টাইমার

লক্ষ্য:

ধরো, তোমার অ্যাপে এমন একটা ফিচার দরকার যেখানে সময় গুনে দেখাবে।

import { useState, useEffect } from "react";
 
export default function useCountdown(initialTime) {
  const [timeLeft, setTimeLeft] = useState(initialTime);
 
  useEffect(() => {
    if (timeLeft <= 0) return;
 
    const intervalId = setInterval(() => {
      setTimeLeft((prevTime) => prevTime - 1);
    }, 1000);
 
    return () => clearInterval(intervalId); // ক্লিনআপ
  }, [timeLeft]);
 
  return timeLeft; // বাকি সময় রিটার্ন
}

এই হুক ব্যবহার

import useCountdown from "./useCountdown";
 
const Timer = () => {
  const timeLeft = useCountdown(10); // ১০ সেকেন্ড থেকে শুরু
 
  return <div>Time left: {timeLeft} seconds</div>;
};
 
export default Timer;

Custom Hook-এর সুবিধা

1. Reusable Logic: একবার লজিক লিখে যেকোনো জায়গায় ব্যবহার করা যায়।
2. কোড পরিষ্কার: কম্পোনেন্ট ফাইল ছোট এবং পরিষ্কার থাকে।
3. ডিবাগিং সহজ: আলাদা ফাংশনে লজিক থাকায় সমস্যা খুঁজে বের করা সহজ হয়।
4. রিয়্যাক্টিভ: React-এর state এবং effect-ভিত্তিক কাজ আরও মজবুত হয়।

কখন Custom Hook বানাবে?

1. যখন একই লজিক বিভিন্ন জায়গায় দরকার হয়।
2. যখন কম্পোনেন্টে লজিক বেশি হয়ে কোড জটিল হয়ে যায়।
3. যখন কম্পোনেন্ট মেইনটেন করা কঠিন হয়ে যায়।

এই ধারণাগুলো মাথায় রেখে, তুমি চাইলে যেকোনো কমপ্লেক্স লজিককে Custom Hook-এ নিয়ে আসতে পারো। প্রয়োজনে তুমি আরো জটিল স্টেট ম্যানেজমেন্ট, API কল, বা ভিন্ন ধরনের কাজেও Custom Hook ব্যবহার করতে পারবে। 😊