Custom Hooks তৈরি করা

React-এ Custom Hooks হল এমন একটি কাস্টম ফাংশন যা React এর বিল্ট-ইন হুকগুলোর (যেমন useState, useEffect) মতোই কাজ করে, তবে এটি আপনার নিজস্ব কাস্টম লজিক বা স্টেট ম্যানেজমেন্টের জন্য তৈরি করা হয়। Custom Hooks দিয়ে আপনি কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি করতে পারেন এবং অ্যাপ্লিকেশনের বিভিন্ন অংশে একই লজিক বা ফিচার ব্যবহার করতে পারেন।

Custom Hook কী?

React এর Hooks, যেমন useState, useEffect, React কম্পোনেন্টের মধ্যে স্টেট বা লাইফসাইকেল ম্যানেজমেন্টে সহায়তা করে। Custom Hook মূলত React এর হুকগুলোর মাধ্যমে নিজের প্রয়োজন অনুযায়ী নতুন ফিচার তৈরি করার সুযোগ দেয়, যা আপনি আপনার প্রজেক্টের বিভিন্ন জায়গায় পুনঃব্যবহার করতে পারেন।

Custom Hooks সাধারণত use প্রিফিক্স দিয়ে শুরু হয়, যা React এর হুকের কনভেনশন অনুসরণ করে।

Custom Hook তৈরি করার প্রক্রিয়া

Custom Hook তৈরি করার জন্য আপনি সাধারণত যে ধাপগুলো অনুসরণ করবেন তা হল:

1. React Hook এর ব্যবহার: আপনি যেই React হুকটি চান, যেমন useState, useEffect, useContext, ইত্যাদি, সেটি আপনার Custom Hook এর মধ্যে ব্যবহার করবেন।
2. লজিককে আলাদা করা: আপনি যেটি পুনঃব্যবহারযোগ্য বানাতে চান, সেই লজিকটি Custom Hook-এ লেখবেন।
3. ফাংশন ফেরত দিন: Custom Hook একটি ফাংশন হিসেবে ফেরত দিবে, যা ডেটা বা স্টেট প্রদান করবে।

Custom Hook এর উদাহরণ

ধরা যাক, আপনি এমন একটি হুক তৈরি করতে চান যা একটি কাউন্টার মান ট্র্যাক করবে এবং তা বাড়াতে বা কমাতে পারবে।

১. Custom Hook তৈরি করা (useCounter)

import { useState } from 'react';

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};

export default useCounter;

এখানে, useCounter একটি Custom Hook যা কাউন্টারের মান, ইনক্রিমেন্ট, ডিক্রিমেন্ট এবং রিসেট করার জন্য লজিক প্রদান করছে।

২. Custom Hook ব্যবহার করা

এখন, আপনি এই Custom Hook-টিকে যেকোনো Functional Component-এ ব্যবহার করতে পারেন।

import React from 'react';
import useCounter from './useCounter'; // Custom Hook ইমপোর্ট করা

const Counter = () => {
  const { count, increment, decrement, reset } = useCounter(10); // Custom Hook ব্যবহার

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increase</button>
      <button onClick={decrement}>Decrease</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default Counter;

এখানে, useCounter হুকটি Counter কম্পোনেন্টে ব্যবহার করা হয়েছে। count, increment, decrement, এবং reset এই চারটি ফাংশন এবং স্টেট useCounter হুক থেকে পাওয়া গেছে।

Custom Hook এর সুবিধা

১. পুনঃব্যবহারযোগ্য কোড

Custom Hooks কোডকে পুনঃব্যবহারযোগ্য করে তোলে, অর্থাৎ আপনি একই লজিক বা ফিচার একাধিক কম্পোনেন্টে ব্যবহার করতে পারেন। এতে কোড ডুপ্লিকেশন কমে এবং মেইন্টেনেবলিটি বাড়ে।

২. বিভিন্ন লজিক আলাদা করা

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

৩. React এর বিল্ট-ইন হুকের সুবিধা

Custom Hooks তৈরি করার মাধ্যমে আপনি React এর বিভিন্ন বিল্ট-ইন হুকের সুবিধা গ্রহণ করতে পারেন। যেমন useState, useEffect, useContext, ইত্যাদি একত্রে ব্যবহার করা যায়।

৪. প্রসারিত ফিচার তৈরি করা

Custom Hooks-এ আপনি নিজের প্রয়োজন অনুযায়ী কাস্টম ফিচার বা স্টেট ম্যানেজমেন্ট লজিক তৈরি করতে পারেন যা React-এর ডিফল্ট হুকগুলোর বাইরে।

কিছু জনপ্রিয় Custom Hook উদাহরণ

1. useLocalStorage - একটি কাস্টম হুক যা localStorage ব্যবহার করে ডেটা সেভ এবং রিট্রিভ করতে সহায়তা করে।
2. useFetch - একটি কাস্টম হুক যা API কল করতে এবং ডেটা ফেচ করতে ব্যবহৃত হয়।
3. useWindowWidth - একটি কাস্টম হুক যা ব্রাউজারের উইন্ডো সাইজ ট্র্যাক করে।

উদাহরণ: useLocalStorage

import { useState } from 'react';

const useLocalStorage = (key, initialValue) => {
  const storedValue = localStorage.getItem(key);
  const [value, setValue] = useState(storedValue ? JSON.parse(storedValue) : initialValue);

  const setLocalStorage = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, setLocalStorage];
};

export default useLocalStorage;

এটি একটি কাস্টম হুক যা localStorage-এ ডেটা সেভ এবং রিট্রিভ করার কাজ করে।

উপসংহার

React-এ Custom Hooks তৈরির মাধ্যমে আপনি কোডকে আরও পরিষ্কার, পুনঃব্যবহারযোগ্য এবং মেইন্টেনেবল করতে পারেন। এতে বিভিন্ন কম্পোনেন্টের মধ্যে একে অপরের সঙ্গে লজিক শেয়ার করা সহজ হয় এবং কোডের ডুপ্লিকেশন কমে। React এর বিভিন্ন বিল্ট-ইন হুকের মতো Custom Hooks ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও দক্ষ ও স্কেলেবল করতে পারেন।