কাস্টম হুকস: রিয়্যাক্টে পুনঃব্যবহারযোগ্য লজিক প্যাটার্নস

রিয়্যাক্ট হুকস ফাংশনাল কম্পোনেন্টে স্টেট এবং লাইফসাইকেল ফিচার এনে রিয়্যাক্ট কম্পোনেন্ট লেখার পদ্ধতিতে বৈপ্লবিক পরিবর্তন এনেছে। এর অনেক সুবিধার মধ্যে, কাস্টম হুকস একাধিক কম্পোনেন্টের মধ্যে লজিক বের করে এনে পুনরায় ব্যবহার করার একটি শক্তিশালী প্রক্রিয়া হিসেবে পরিচিত। এই ব্লগ পোস্টে আমরা কাস্টম হুকসের জগতে গভীরভাবে প্রবেশ করব, এর সুবিধা, তৈরি এবং ব্যবহারিক উদাহরণ সহ আলোচনা করব।

কাস্টম হুকস কী?

মূলত, একটি কাস্টম হুক হল একটি জাভাস্ক্রিপ্ট ফাংশন যা "use" শব্দ দিয়ে শুরু হয় এবং অন্যান্য হুকস কল করতে পারে। এটি আপনাকে কম্পোনেন্টের লজিককে পুনঃব্যবহারযোগ্য ফাংশনে বের করে আনতে দেয়। এটি রেন্ডার প্রপস, হায়ার-অর্ডার কম্পোনেন্ট বা অন্যান্য জটিল প্যাটার্নের সাহায্য ছাড়াই কম্পোনেন্টগুলোর মধ্যে স্টেটফুল লজিক, সাইড এফেক্ট বা অন্যান্য জটিল আচরণ শেয়ার করার একটি শক্তিশালী উপায়।

কাস্টম হুকসের মূল বৈশিষ্ট্য:

• নামকরণের নিয়ম: কাস্টম হুকস অবশ্যই "use" শব্দ দিয়ে শুরু হতে হবে। এটি রিয়্যাক্টকে সংকেত দেয় যে ফাংশনটিতে হুকস রয়েছে এবং এটি হুকসের নিয়মাবলী অনুসরণ করবে।
• পুনঃব্যবহারযোগ্যতা: এর মূল উদ্দেশ্য হল পুনঃব্যবহারযোগ্য লজিককে এনক্যাপসুলেট করা, যা কম্পোনেন্টগুলির মধ্যে কার্যকারিতা ভাগ করে নেওয়া সহজ করে তোলে।
• স্টেটফুল লজিক: কাস্টম হুকস useState হুক ব্যবহার করে তাদের নিজস্ব স্টেট পরিচালনা করতে পারে, যা তাদের জটিল স্টেটফুল আচরণকে এনক্যাপসুলেট করতে দেয়।
• সাইড এফেক্টস: তারা useEffect হুক ব্যবহার করে সাইড এফেক্টসও সম্পাদন করতে পারে, যা এক্সটার্নাল এপিআই, ডেটা ফেচিং এবং আরও অনেক কিছুর সাথে ইন্টিগ্রেশন সক্ষম করে।
• কম্পোজেবল: কাস্টম হুকস অন্যান্য হুকস কল করতে পারে, যা আপনাকে ছোট, আরও ফোকাসড হুকস রচনা করে জটিল লজিক তৈরি করতে দেয়।

কাস্টম হুকস ব্যবহারের সুবিধা

রিয়্যাক্ট ডেভেলপমেন্টে কাস্টম হুকস বেশ কিছু গুরুত্বপূর্ণ সুবিধা প্রদান করে:

• কোড পুনঃব্যবহারযোগ্যতা: সবচেয়ে সুস্পষ্ট সুবিধা হল একাধিক কম্পোনেন্টে লজিক পুনঃব্যবহার করার ক্ষমতা। এটি কোডের পুনরাবৃত্তি কমায় এবং একটি আরও DRY (Don't Repeat Yourself) কোডবেস তৈরি করে।
• উন্নত পঠনযোগ্যতা: জটিল লজিককে আলাদা কাস্টম হুকসে বের করে আনার মাধ্যমে আপনার কম্পোনেন্টগুলো আরও পরিষ্কার এবং সহজে বোঝা যায়। মূল কম্পোনেন্ট লজিক UI রেন্ডার করার উপর ফোকাসড থাকে।
• উন্নত রক্ষণাবেক্ষণযোগ্যতা: যখন লজিক কাস্টম হুকসে এনক্যাপসুলেট করা হয়, তখন পরিবর্তন এবং বাগ ফিক্স একটি একক স্থানে প্রয়োগ করা যায়, যা একাধিক কম্পোনেন্টে ভুল হওয়ার ঝুঁকি কমায়।
• পরীক্ষাযোগ্যতা: কাস্টম হুকস সহজেই আলাদাভাবে পরীক্ষা করা যায়, যা নিশ্চিত করে যে পুনঃব্যবহারযোগ্য লজিকটি যে কম্পোনেন্টগুলো এটি ব্যবহার করে তাদের থেকে স্বাধীনভাবে সঠিকভাবে কাজ করছে।
• সরলীকৃত কম্পোনেন্ট: কাস্টম হুকস কম্পোনেন্টগুলোকে গোছাতে সাহায্য করে, তাদের কম ভার্বোস (verbose) এবং তাদের মূল উদ্দেশ্যের উপর আরও বেশি ফোকাসড করে তোলে।

আপনার প্রথম কাস্টম হুক তৈরি করা

চলুন একটি ব্যবহারিক উদাহরণ দিয়ে একটি কাস্টম হুক তৈরির প্রক্রিয়াটি ব্যাখ্যা করি: একটি হুক যা উইন্ডোর আকার ট্র্যাক করবে।

উদাহরণ: useWindowSize

এই হুকটি ব্রাউজার উইন্ডোর বর্তমান প্রস্থ এবং উচ্চতা রিটার্ন করবে। এটি উইন্ডো রিসাইজ করা হলে এই মানগুলো আপডেটও করবে।

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    // ক্লিনআপের সময় ইভেন্ট লিসেনারটি সরিয়ে ফেলুন
    return () => window.removeEventListener('resize', handleResize);
  }, []); // খালি অ্যারে নিশ্চিত করে যে ইফেক্টটি কেবল মাউন্ট করার সময় চালানো হয়

  return windowSize;
}

export default useWindowSize;

ব্যাখ্যা:

1. প্রয়োজনীয় হুকস ইম্পোর্ট করুন: আমরা রিয়্যাক্ট থেকে useState এবং useEffect ইম্পোর্ট করি।
2. হুকটি ডিফাইন করুন: আমরা নামকরণের নিয়ম মেনে useWindowSize নামে একটি ফাংশন তৈরি করি।
3. স্টেট ইনিশিয়ালাইজ করুন: আমরা উইন্ডোর প্রাথমিক প্রস্থ এবং উচ্চতা দিয়ে windowSize স্টেট ইনিশিয়ালাইজ করতে useState ব্যবহার করি।
4. ইভেন্ট লিসেনার সেট আপ করুন: আমরা উইন্ডোতে একটি রিসাইজ ইভেন্ট লিসেনার যোগ করতে useEffect ব্যবহার করি। যখন উইন্ডো রিসাইজ করা হয়, handleResize ফাংশনটি windowSize স্টেট আপডেট করে।
5. ক্লিনআপ: কম্পোনেন্ট আনমাউন্ট হওয়ার সময় ইভেন্ট লিসেনারটি সরিয়ে ফেলার জন্য আমরা useEffect থেকে একটি ক্লিনআপ ফাংশন রিটার্ন করি। এটি মেমরি লিক প্রতিরোধ করে।
6. রিটার্ন ভ্যালু: হুকটি windowSize অবজেক্ট রিটার্ন করে, যাতে উইন্ডোর বর্তমান প্রস্থ এবং উচ্চতা থাকে।

কম্পোনেন্টে কাস্টম হুক ব্যবহার করা

যেহেতু আমরা আমাদের কাস্টম হুক তৈরি করে ফেলেছি, আসুন দেখি এটি কীভাবে একটি রিয়্যাক্ট কম্পোনেন্টে ব্যবহার করতে হয়।

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

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    

      
উইন্ডোর প্রস্থ: {width}px
      
উইন্ডোর উচ্চতা: {height}px
    
  );
}

export default MyComponent;

ব্যাখ্যা:

1. হুকটি ইম্পোর্ট করুন: আমরা useWindowSize কাস্টম হুকটি ইম্পোর্ট করি।
2. হুকটি কল করুন: আমরা কম্পোনেন্টের মধ্যে useWindowSize হুকটি কল করি।
3. ভ্যালু অ্যাক্সেস করুন: আমরা width এবং height ভ্যালু পেতে রিটার্ন করা অবজেক্টটিকে ডিস্ট্রাকচার করি।
4. ভ্যালু রেন্ডার করুন: আমরা কম্পোনেন্টের UI-তে প্রস্থ এবং উচ্চতার মান রেন্ডার করি।

যেকোনো কম্পোনেন্ট যা useWindowSize ব্যবহার করে, উইন্ডোর আকার পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে আপডেট হবে।

আরও জটিল উদাহরণ

চলুন কাস্টম হুকসের আরও কিছু উন্নত ব্যবহার দেখি।

উদাহরণ: useLocalStorage

এই হুকটি আপনাকে সহজেই লোকাল স্টোরেজ থেকে ডেটা সংরক্ষণ এবং পুনরুদ্ধার করতে দেয়।

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // আমাদের মান সংরক্ষণ করার জন্য স্টেট
  // useState-কে প্রাথমিক মান পাস করুন যাতে লজিক শুধুমাত্র একবার কার্যকর হয়
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // কী দ্বারা লোকাল স্টোরেজ থেকে ডেটা পান
      const item = window.localStorage.getItem(key);
      // সংরক্ষিত json পার্স করুন অথবা কোনোটি না থাকলে initialValue রিটার্ন করুন
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // ত্রুটি হলেও initialValue রিটার্ন করুন
      console.log(error);
      return initialValue;
    }
  });

  // useState-এর সেটার ফাংশনের একটি মোড়ানো সংস্করণ রিটার্ন করুন যা ...
  // ... নতুন মানটি localStorage-এ স্থায়ী করে।
  const setValue = (value) => {
    try {
      // মানটিকে একটি ফাংশন হতে দিন যাতে আমাদের useState-এর মতো একই API থাকে
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // লোকাল স্টোরেজে সংরক্ষণ করুন
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
      // স্টেট সংরক্ষণ করুন
      setStoredValue(valueToStore);
    } catch (error) {
      // একটি আরও উন্নত বাস্তবায়ন ত্রুটির ক্ষেত্রে কাজ করবে
      console.log(error);
    }
  };

  useEffect(() => {
    try {
      const item = window.localStorage.getItem(key);
      setStoredValue(item ? JSON.parse(item) : initialValue);
    } catch (error) {
      console.log(error);
    }
  }, [key, initialValue]);

  return [storedValue, setValue];
}

export default useLocalStorage;

ব্যবহার:

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

function MyComponent() {
  const [name, setName] = useLocalStorage('name', 'অতিথি');

  return (
    

      
নমস্কার, {name}!
       setName(e.target.value)}
      />
    
  );
}

export default MyComponent;

উদাহরণ: useFetch

এই হুকটি একটি এপিআই থেকে ডেটা আনার লজিককে এনক্যাপসুলেট করে।

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

ব্যবহার:

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

function MyComponent() {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1');

  if (loading) return 
লোড হচ্ছে...
;
  if (error) return 
ত্রুটি: {error.message}
;

  return (
    

      
শিরোনাম: {data.title}
      
সম্পন্ন: {data.completed ? 'হ্যাঁ' : 'না'}
    
  );
}

export default MyComponent;

কাস্টম হুকসের জন্য সেরা অনুশীলন

আপনার কাস্টম হুকগুলো যেন কার্যকরী এবং রক্ষণাবেক্ষণযোগ্য হয়, তা নিশ্চিত করতে এই সেরা অনুশীলনগুলো অনুসরণ করুন:

• এদেরকে ফোকাসড রাখুন: প্রতিটি কাস্টম হুকের একটি একক, সুস্পষ্ট উদ্দেশ্য থাকা উচিত। অতিরিক্ত জটিল হুক তৈরি করা এড়িয়ে চলুন যা অনেক কিছু করার চেষ্টা করে।
• আপনার হুকগুলো ডকুমেন্ট করুন: প্রতিটি কাস্টম হুকের জন্য স্পষ্ট এবং সংক্ষিপ্ত ডকুমেন্টেশন প্রদান করুন, এর উদ্দেশ্য, ইনপুট এবং আউটপুট ব্যাখ্যা করে।
• আপনার হুকগুলো পরীক্ষা করুন: আপনার কাস্টম হুকগুলোর জন্য ইউনিট টেস্ট লিখুন যাতে তারা সঠিকভাবে এবং নির্ভরযোগ্যভাবে কাজ করে।
• বর্ণনামূলক নাম ব্যবহার করুন: আপনার কাস্টম হুকগুলোর জন্য বর্ণনামূলক নাম নির্বাচন করুন যা তাদের উদ্দেশ্য স্পষ্টভাবে নির্দেশ করে।
• ত্রুটিগুলো সুন্দরভাবে পরিচালনা করুন: অপ্রত্যাশিত আচরণ প্রতিরোধ করতে এবং তথ্যপূর্ণ ত্রুটির বার্তা প্রদান করতে আপনার কাস্টম হুকগুলোর মধ্যে ত্রুটি হ্যান্ডলিং প্রয়োগ করুন।
• পুনঃব্যবহারযোগ্যতা বিবেচনা করুন: আপনার কাস্টম হুকগুলো পুনঃব্যবহারযোগ্যতার কথা মাথায় রেখে ডিজাইন করুন। একাধিক কম্পোনেন্টে ব্যবহার করার জন্য সেগুলোকে যথেষ্ট জেনেরিক করুন।
• অতিরিক্ত অ্যাবস্ট্রাকশন এড়িয়ে চলুন: সাধারণ লজিকের জন্য কাস্টম হুক তৈরি করবেন না যা একটি কম্পোনেন্টের মধ্যে সহজেই পরিচালনা করা যায়। শুধুমাত্র সেই লজিক বের করুন যা সত্যিই পুনঃব্যবহারযোগ্য এবং জটিল।

সাধারণ ভুল যা এড়িয়ে চলতে হবে

• হুকসের নিয়ম ভাঙ্গা: সর্বদা আপনার কাস্টম হুক ফাংশনের টপ লেভেলে হুকস কল করুন এবং শুধুমাত্র রিয়্যাক্ট ফাংশন কম্পোনেন্ট বা অন্যান্য কাস্টম হুকস থেকে কল করুন।
• useEffect-এ ডিপেন্ডেন্সি উপেক্ষা করা: পুরনো ক্লোজার এবং অপ্রত্যাশিত আচরণ রোধ করতে useEffect হুকের ডিপেন্ডেন্সি অ্যারেতে সমস্ত প্রয়োজনীয় ডিপেন্ডেন্সি অন্তর্ভুক্ত করা নিশ্চিত করুন।
• অসীম লুপ তৈরি করা: একটি useEffect হুকের মধ্যে স্টেট আপডেট করার সময় সতর্ক থাকুন, কারণ এটি সহজেই অসীম লুপের কারণ হতে পারে। নিশ্চিত করুন যে আপডেটটি শর্তাধীন এবং ডিপেন্ডেন্সির পরিবর্তনের উপর ভিত্তি করে।
• ক্লিনআপ ভুলে যাওয়া: মেমরি লিক রোধ করার জন্য ইভেন্ট লিসেনারগুলো সরাতে, সাবস্ক্রিপশন বাতিল করতে এবং অন্যান্য ক্লিনআপ কাজ সম্পাদন করতে সর্বদা useEffect-এ একটি ক্লিনআপ ফাংশন অন্তর্ভুক্ত করুন।

অ্যাডভান্সড প্যাটার্নস

কাস্টম হুকস কম্পোজ করা

আরও জটিল লজিক তৈরি করতে কাস্টম হুকস একসাথে কম্পোজ করা যেতে পারে। উদাহরণস্বরূপ, আপনি একটি useLocalStorage হুককে একটি useFetch হুকের সাথে একত্রিত করে ফেচ করা ডেটা স্বয়ংক্রিয়ভাবে লোকাল স্টোরেজে সংরক্ষণ করতে পারেন।

হুকসের মধ্যে লজিক শেয়ার করা

যদি একাধিক কাস্টম হুক সাধারণ লজিক শেয়ার করে, আপনি সেই লজিকটি একটি পৃথক ইউটিলিটি ফাংশনে বের করে উভয় হুকে পুনরায় ব্যবহার করতে পারেন।

কাস্টম হুকসের সাথে কনটেক্সট ব্যবহার করা

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

বাস্তব-বিশ্বের উদাহরণ

বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলোতে কাস্টম হুকস কীভাবে ব্যবহার করা যেতে পারে তার কিছু উদাহরণ এখানে দেওয়া হলো:

• ফর্ম ভ্যালিডেশন: ফর্ম স্টেট, ভ্যালিডেশন এবং সাবমিশন পরিচালনা করার জন্য একটি useForm হুক তৈরি করুন।
• অথেন্টিকেশন: ব্যবহারকারীর অথেন্টিকেশন এবং অথরাইজেশন পরিচালনা করার জন্য একটি useAuth হুক বাস্তবায়ন করুন।
• থিম ম্যানেজমেন্ট: বিভিন্ন থিমের (যেমন লাইট, ডার্ক) মধ্যে স্যুইচ করার জন্য একটি useTheme হুক তৈরি করুন।
• জিওলোকেশন: ব্যবহারকারীর বর্তমান অবস্থান ট্র্যাক করার জন্য একটি useGeolocation হুক তৈরি করুন।
• স্ক্রোল ডিটেকশন: ব্যবহারকারী পৃষ্ঠার একটি নির্দিষ্ট বিন্দুতে স্ক্রোল করেছে কিনা তা সনাক্ত করতে একটি useScroll হুক তৈরি করুন।

উদাহরণ : ম্যাপিং বা ডেলিভারি পরিষেবার মতো ক্রস-কালচারাল অ্যাপ্লিকেশনগুলির জন্য useGeolocation হুক

import { useState, useEffect } from 'react';

function useGeolocation() {
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    error: null,
  });

  useEffect(() => {
    if (!navigator.geolocation) {
      setLocation({
        latitude: null,
        longitude: null,
        error: 'এই ব্রাউজার দ্বারা জিওলোকেশন সমর্থিত নয়।',
      });
      return;
    }

    const watchId = navigator.geolocation.watchPosition(
      (position) => {
        setLocation({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => {
        setLocation({
          latitude: null,
          longitude: null,
          error: error.message,
        });
      }
    );

    return () => navigator.geolocation.clearWatch(watchId);
  }, []);

  return location;
}

export default useGeolocation;

উপসংহার

কাস্টম হুকস পরিষ্কার, আরও পুনঃব্যবহারযোগ্য এবং আরও রক্ষণাবেক্ষণযোগ্য রিয়্যাক্ট কোড লেখার জন্য একটি শক্তিশালী টুল। কাস্টম হুকসে জটিল লজিক এনক্যাপসুলেট করে, আপনি আপনার কম্পোনেন্টগুলোকে সহজ করতে পারেন, কোডের পুনরাবৃত্তি কমাতে পারেন এবং আপনার অ্যাপ্লিকেশনগুলোর সামগ্রিক কাঠামো উন্নত করতে পারেন। কাস্টম হুকস গ্রহণ করুন এবং আরও শক্তিশালী এবং পরিমাপযোগ্য রিয়্যাক্ট অ্যাপ্লিকেশন তৈরি করতে তাদের সম্ভাবনাকে কাজে লাগান।

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

সেরা অনুশীলনগুলো অনুসরণ করতে, সাধারণ ভুলগুলো এড়াতে এবং কাস্টম হুকস থেকে সর্বাধিক সুবিধা পেতে অ্যাডভান্সড প্যাটার্নগুলো অন্বেষণ করতে ভুলবেন না। অনুশীলন এবং অভিজ্ঞতার সাথে, আপনি কাস্টম হুকসের একজন মাস্টার এবং আরও কার্যকর রিয়্যাক্ট ডেভেলপার হয়ে উঠবেন।