React Hooks কী এবং কেন গুরুত্বপূর্ণ?

React Hooks হলো React ১৬.৮ এ চালু করা একটি নতুন বৈশিষ্ট্য, যা ক্লাস কম্পোনেন্টের পরিবর্তে ফাংশনাল কম্পোনেন্টে স্টেট, লাইফসাইকেল এবং অন্যান্য React ফিচার ব্যবহার করার সুবিধা দেয়। এটি React অ্যাপ্লিকেশনে ফাংশনাল কম্পোনেন্টের মাধ্যমে আরও সহজ এবং কার্যকরী কোড লেখার সুযোগ সৃষ্টি করেছে।

এর আগে, React এ ক্লাস কম্পোনেন্ট ব্যবহার করতে হত যাতে স্টেট ম্যানেজমেন্ট, লাইফসাইকেল মেথড এবং অন্যান্য ফিচার ব্যবহার করা যায়। তবে Hooks-এর মাধ্যমে, এই সব ফিচার ফাংশনাল কম্পোনেন্টে সহজেই অ্যাক্সেস করা সম্ভব হয়েছে, যা কোডকে আরও সিম্পল, ক্লিন এবং মেইনটেইনেবল করে।

React Hooks-এর মূল ফিচারসমূহ

React Hooks বেশ কয়েকটি প্রাথমিক ফিচারের মাধ্যমে ফাংশনাল কম্পোনেন্টে স্টেট, সাইড-ইফেক্ট এবং অন্যান্য ফিচার ব্যবহারের সুযোগ দেয়। এখানে কিছু জনপ্রিয় React Hooks এর আলোচনা করা হলো:

১. useState (স্টেট হুক)

useState হুকটি ফাংশনাল কম্পোনেন্টে স্টেট ব্যবহারের জন্য ব্যবহৃত হয়। এর মাধ্যমে, আপনি কম্পোনেন্টের মধ্যে স্টেট সংরক্ষণ এবং আপডেট করতে পারেন।

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // স্টেট পরিবর্তন

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

এখানে:

• count: স্টেটের বর্তমান মান
• setCount: স্টেট আপডেট করার ফাংশন
• useState(0): useState হুকের মাধ্যমে স্টেট 0 দিয়ে ইনিশিয়ালাইজ করা হয়েছে।

২. useEffect (এফেক্ট হুক)

useEffect হুকটি কম্পোনেন্টের সাইড-ইফেক্ট (যেমন, API কল, DOM ম্যানিপুলেশন, সাবস্ক্রিপশন, টাইমার ইত্যাদি) পরিচালনার জন্য ব্যবহৃত হয়। এটি React কম্পোনেন্টে লাইফসাইকেল মেথডের মতো কাজ করে, যেমন componentDidMount, componentDidUpdate, এবং componentWillUnmount।

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // Cleanup function
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs only once (like componentDidMount)

  return <p>Seconds: {seconds}</p>;
}

এখানে:

• useEffect ব্যবহার করে প্রতি সেকেন্ডে টাইমার বাড়ানোর কার্যক্রম করা হচ্ছে।
• সাফ (cleanup) ফাংশন ব্যবহৃত হয়েছে, যাতে কম্পোনেন্টটি আনমাউন্ট হলে টাইমার বন্ধ হয়ে যায়।

৩. useContext (কন্টেক্সট হুক)

useContext হুকটি React কন্টেক্সট API ব্যবহার করার জন্য ব্যবহৃত হয়। এটি পারেন্ট কম্পোনেন্ট থেকে কোনো কন্টেক্সট মান (value) নিয়ে ফাংশনাল কম্পোনেন্টে সরাসরি ব্যবহারের সুযোগ দেয়।

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  
  return <div>The current theme is {theme}</div>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

এখানে:

• useContext ব্যবহার করে ThemeContext থেকে theme মান নিয়ে ব্যবহার করা হয়েছে।

৪. useReducer (রিডিউসার হুক)

useReducer হুকটি স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়, বিশেষ করে যখন স্টেটের পরিবর্তন গুলি বেশি কমপ্লেক্স বা ডিপেন্ডেন্ট থাকে। এটি Redux-এর রিডিউসার এবং একশন কনসেপ্টের মতো কাজ করে।

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

এখানে:

• useReducer হুকের মাধ্যমে স্টেটের পরিবর্তন পরিচালিত হচ্ছে, যেটি রিডিউসার এবং একশন ব্যবহার করে কাজ করে।

৫. useRef (রেফারেন্স হুক)

useRef হুকটি ডম (DOM) এলিমেন্ট বা যেকোনো মানকে রেফারেন্স করার জন্য ব্যবহৃত হয়। এটি স্টেটের মত পুনরায় রেন্ডার করার জন্য ব্যবহৃত হয় না, বরং এটি একটি স্থির মান ধরে রাখে।

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // ইনপুট ফিল্ডে ফোকাস করা
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

এখানে:

• useRef ব্যবহার করে ইনপুট ফিল্ডের রেফারেন্স তৈরি করা হয়েছে, এবং বোতাম ক্লিক করলে ইনপুট ফিল্ডে ফোকাস করা হয়।

React Hooks কেন গুরুত্বপূর্ণ?

1. ফাংশনাল কম্পোনেন্টে স্টেট ব্যবহারের সুবিধা
   React Hooks ফাংশনাল কম্পোনেন্টে স্টেট এবং অন্যান্য ফিচার ব্যবহার করার সুযোগ দেয়। এটি ক্লাস কম্পোনেন্টের পরিবর্তে ফাংশনাল কম্পোনেন্টকে শক্তিশালী করে তোলে।
2. কোড কম্প্যাক্ট ও পরিষ্কার
   Hooks ব্যবহারে কোড অনেক কমপ্যাক্ট এবং পরিষ্কার হয়। ক্লাস কম্পোনেন্টের তুলনায় ফাংশনাল কম্পোনেন্টে অনেক কম কোড লিখতে হয়, যা মেইনটেইন করা সহজ।
3. লাইফসাইকেল মেথড সহজে ব্যবহার করা
   useEffect হুকটি লাইফসাইকেল মেথড যেমন componentDidMount, componentDidUpdate এবং componentWillUnmount এর কার্যকারিতা ফাংশনাল কম্পোনেন্টে সরাসরি প্রদান করে, যা কোড সহজতর করে।
4. স্টেট ম্যানেজমেন্ট আরও শক্তিশালী
   useReducer হুকটি বেশি জটিল স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়, এবং এটি রিডিউসার প্যাটার্নের মতো কাজ করে, যা Redux-এ ব্যবহৃত হয়। এটি বড় প্রোজেক্টে স্টেট ব্যবস্থাপনা আরও সুসংগঠিত রাখে।
5. রেফারেন্স ম্যানেজমেন্ট
   useRef হুকটি স্টেট বা রেন্ডার ছাড়া ডম এলিমেন্টের রেফারেন্স রাখার সুবিধা দেয়, যা কোনো রেন্ডার ইফেক্ট ছাড়াই এলিমেন্টের সাথে ইন্টারঅ্যাক্ট করতে সাহায্য করে।
6. আরও ইউজারফ্রেন্ডলি
   React Hooks ডেভেলপারদের জন্য আরও ইউজারফ্রেন্ডলি। কোড সরল, কমপ্লেক্সিটি কম, এবং দ্রুত নতুন ফিচার সংযোজনের সুযোগ থাকে।

সারাংশ

React Hooks হল React এর শক্তিশালী একটি বৈশিষ্ট্য যা ফাংশনাল কম্পোনেন্টে স্টেট এবং অন্যান্য লাইফসাইকেল ফিচার ব্যবহার করতে সাহায্য করে। useState, useEffect, useReducer, useRef, এবং useContext এর মতো হুকগুলি React কম্পোনেন্টগুলিকে আরও শক্তিশালী এবং কার্যকরী করে তোলে। React Hooks ব্যবহারের মাধ্যমে কোড আরও কমপ্যাক্ট, পরিষ্কার এবং মেইনটেইনেবল হয়, এবং এটি ডেভ

েলপারদের জন্য দ্রুত এবং উন্নত অ্যাপ্লিকেশন ডেভেলপমেন্টে সহায়ক।