useState এবং useEffect Hook এর ব্যবহার

ReactJS-এ Hooks হল এমন ফাংশন যা ক্লাস কম্পোনেন্টের বাইরে থেকে React স্টেট এবং লাইফসাইকেল ফিচার ব্যবহার করতে সাহায্য করে। useState এবং useEffect হল React এর সবচেয়ে জনপ্রিয় এবং গুরুত্বপূর্ণ হুক। এগুলো ব্যবহার করে আপনি ফাংশনাল কম্পোনেন্টে স্টেট এবং সাইড-এফেক্ট ম্যানেজ করতে পারেন।

useState Hook

useState হুক React ফাংশনাল কম্পোনেন্টে স্টেট (state) পরিচালনা করার জন্য ব্যবহৃত হয়। এটি একটি আরেকে ফেরত দেয়: প্রথমটি হল বর্তমান স্টেট ভ্যালু, এবং দ্বিতীয়টি হল সেই স্টেট ভ্যালু আপডেট করার জন্য একটি ফাংশন।

ব্যবহার:

const [state, setState] = useState(initialState);

• state: বর্তমান স্টেট ভ্যালু।
• setState: স্টেট আপডেট করার জন্য ব্যবহৃত ফাংশন।
• initialState: স্টেটের প্রথম মান, এটি প্রাথমিক অবস্থায় দেওয়ার জন্য ব্যবহৃত হয়।

উদাহরণ:

import React, { useState } from 'react';

const Counter = () => {
  // count হলো স্টেট, এবং setCount হলো ফাংশন যা স্টেট আপডেট করবে।
  const [count, setCount] = useState(0);

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

export default Counter;

এখানে count স্টেট হিসেবে শুরু হয়েছে 0 দিয়ে, এবং setCount ফাংশন ব্যবহার করে এটি আপডেট করা হচ্ছে। Increase বাটনে ক্লিক করলে count বাড়বে এবং Decrease বাটনে ক্লিক করলে count কমবে।

useEffect Hook

useEffect হুক React ফাংশনাল কম্পোনেন্টে সাইড-এফেক্ট পরিচালনার জন্য ব্যবহৃত হয়। সাইড-এফেক্ট এমন কিছু যা আপনার কম্পোনেন্টের রেন্ডার প্রক্রিয়ার বাইরে ঘটে, যেমন ডেটা ফেচিং, সাবস্ক্রিপশন, টাইমার সেট করা ইত্যাদি।

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

ব্যবহার:

useEffect(() => {
  // সাইড-এফেক্ট কোড এখানে থাকবে।

  // রিটার্ন করার মাধ্যমে ক্লিন-আপ ফাংশন (optional) যোগ করা যায়।
  return () => {
    // ক্লিন-আপ কোড এখানে থাকবে।
  };
}, [dependencies]);

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

উদাহরণ:

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

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

  // useEffect দিয়ে টাইমার তৈরি করা
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // ক্লিন-আপ ফাংশন
    return () => clearInterval(interval);
  }, []); // [] মানে কম্পোনেন্ট প্রথমবার রেন্ডার হওয়ার পর একবারই চলবে

  return (
    <div>
      <p>Time: {seconds} seconds</p>
    </div>
  );
};

export default Timer;

এখানে, useEffect হুক ব্যবহার করে একটি টাইমার তৈরি করা হয়েছে যা প্রতি সেকেন্ডে seconds স্টেট বাড়িয়ে দেয়। কম্পোনেন্টটি আনমাউন্ট হলে clearInterval ফাংশনটি ব্যবহার করে টাইমার বন্ধ করা হয়।

useEffect এর ডিপেনডেন্সি

useEffect হুকের দ্বিতীয় আর্গুমেন্ট একটি ডিপেনডেন্সি অ্যারে হতে পারে। এটি React কে বলে দেয়, কোন ভ্যারিয়েবলগুলোর পরিবর্তন হলে সাইড-এফেক্ট কোডটি পুনরায় রান করবে।

উদাহরণ ১: নির্দিষ্ট স্টেট বা প্রপ্সের উপর নির্ভরশীল

useEffect(() => {
  // সাইড-এফেক্ট কোড
}, [someState]);  // only runs when someState changes

উদাহরণ ২: ডিফল্টভাবে একবারই রান করা

useEffect(() => {
  // সাইড-এফেক্ট কোড
}, []);  // runs only once, when the component mounts

উদাহরণ ৩: সব সময় রান করা (কম্পোনেন্টের প্রতি রেন্ডারে)

useEffect(() => {
  // সাইড-এফেক্ট কোড
});  // runs after every render

useEffect এবং useState একসাথে ব্যবহার

useState এবং useEffect একসাথে ব্যবহার করে আপনি বিভিন্ন ধরনের ইন্টারেকশন তৈরি করতে পারেন। যেমন, ফরম ফিল্ডের মান পরিবর্তন হলে API কল করা অথবা কোনো ভ্যালু আপডেট হলে UI রেন্ডার করা।

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

const DataFetcher = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []); // runs once on component mount

  if (loading) return <p>Loading...</p>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

export default DataFetcher;

এখানে useEffect হুক ব্যবহার করে data ফেচ করা হচ্ছে এবং useState হুক ব্যবহার করে লোডিং স্টেট ট্র্যাক করা হচ্ছে। একবার ডেটা আসলে, loading স্টেট আপডেট হয়ে UI রেন্ডার হবে।

সারাংশ

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