Hooks এর মাধ্যমে Functional Components এ State Management

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

এই টিউটোরিয়ালে আমরা useState এবং অন্যান্য সাধারণ hooks এর মাধ্যমে ফাংশনাল কম্পোনেন্টে স্টেট ব্যবস্থাপনা দেখব।

১. useState Hook: স্টেট ব্যবস্থাপনা

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

• স্টেট ভ্যালু (current state)
• স্টেট আপডেট ফাংশন (function to update the state)

useState Hook ব্যবহার করা:

import React, { useState } from 'react';

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

  // বাটনে ক্লিক করলে count বৃদ্ধি হবে
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

ব্যাখ্যা:

• useState(0) স্টেটের প্রাথমিক মান 0 সেট করে।
• count হলো স্টেট ভ্যালু, এবং setCount হলো স্টেট আপডেট করার ফাংশন।
• onClick ইভেন্টের মাধ্যমে setCount ব্যবহার করে count এর মান বাড়ানো হচ্ছে।

২. useState Hook-এর মাধ্যমে স্টেট আপডেট

useState hook-এর মাধ্যমে আপনি স্টেটের মান পরিবর্তন করতে পারেন। স্টেট আপডেট করার সময়, React একটি রি-রেন্ডার ট্রিগার করে যাতে UI নতুন স্টেটের সাথে আপডেট হয়।

উদাহরণ:

import React, { useState } from 'react';

function LikeButton() {
  const [isLiked, setIsLiked] = useState(false); // প্রাথমিক মান false

  return (
    <div>
      <button onClick={() => setIsLiked(!isLiked)}>
        {isLiked ? 'Unlike' : 'Like'}
      </button>
    </div>
  );
}

export default LikeButton;

এখানে, isLiked একটি বুলিয়ান স্টেট, যা বাটনে ক্লিক করলে true বা false হতে পারে। প্রতিবার ক্লিক করলে, setIsLiked(!isLiked) স্টেটের মান পরিবর্তন করে এবং UI আপডেট হয়।

৩. স্টেট আপডেট এবং পূর্ববর্তী স্টেট

React এর useState ফাংশন আপনাকে পূর্ববর্তী স্টেটের ভিত্তিতে নতুন স্টেট সেট করার সুবিধা দেয়। যদি আপনি স্টেটের আগের মানের উপর ভিত্তি করে নতুন মান হিসাব করতে চান, তবে আপনি setState ফাংশনে একটি কলব্যাক ফাংশন ব্যবহার করতে পারেন।

উদাহরণ:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // পূর্ববর্তী স্টেট ব্যবহার করে count বৃদ্ধি করা
  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

export default Counter;

এখানে, setCount(prevCount => prevCount + 1) ব্যবহার করা হয়েছে, যা পূর্ববর্তী count স্টেটের মানে এক যোগ করে নতুন স্টেট সেট করে।

৪. একাধিক স্টেট ব্যবহার করা

একটি কম্পোনেন্টে একাধিক স্টেট ভ্যালু রাখা সম্ভব। প্রতিটি স্টেটের জন্য আলাদা useState কল করা হয়।

উদাহরণ:

import React, { useState } from 'react';

function UserProfile() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);

  return (
    <div>
      <h1>{name}'s Profile</h1>
      <p>Age: {age}</p>
      <button onClick={() => setName('Jane')}>Change Name</button>
      <button onClick={() => setAge(age + 1)}>Increase Age</button>
    </div>
  );
}

export default UserProfile;

এখানে, name এবং age দুইটি আলাদা স্টেট ভ্যালু ব্যবহার করা হয়েছে এবং তাদের মান পরিবর্তন করতে আলাদা setName এবং setAge ব্যবহার করা হচ্ছে।

৫. স্টেট ডিফল্ট মান পরিবর্তন করা

React এর useState hook স্টেটের ডিফল্ট মান গ্রহণ করে, তবে এই মানটি যেকোনো সময় পরিবর্তন করা যায়। প্রথমবার যখন কম্পোনেন্ট রেন্ডার হয়, তখন useState প্রথম আর্গুমেন্টটি ডিফল্ট মান হিসেবে ব্যবহার করে।

উদাহরণ:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(() => {
    // স্টেটের প্রাথমিক মান হিসেবে এক্সটেনাল ফাংশন ব্যবহার
    return 10;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

এখানে, useState এর মধ্যে একটি ফাংশন দেওয়া হয়েছে যা ডিফল্ট মান প্রদান করছে (যেমন ১০)।

৬. স্টেটের সাথে অবজেক্ট বা অ্যারে ব্যবহার

useState-এ আপনি অবজেক্ট বা অ্যারে ধরনের ডেটা ব্যবহারের জন্য স্টেট রাখতে পারেন। তবে, এই ক্ষেত্রে স্টেট আপডেট করার সময় নতুন অবজেক্ট বা অ্যারে তৈরি করতে হবে।

অবজেক্টের সাথে স্টেট ব্যবহার:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateUser = () => {
    setUser(prevUser => ({ ...prevUser, name: 'Jane' }));
  };

  return (
    <div>
      <h1>{user.name}'s Profile</h1>
      <p>Age: {user.age}</p>
      <button onClick={updateUser}>Change Name</button>
    </div>
  );
}

export default UserProfile;

এখানে, অবজেক্ট user স্টেট হিসেবে ব্যবহার হচ্ছে এবং setUser এর মাধ্যমে স্টেট আপডেট করা হচ্ছে। স্টেট আপডেটের সময় আগের অবজেক্টের সঠিক কপি ধরে রেখে পরিবর্তন করা হচ্ছে (...prevUser ব্যবহার করে)।

সারাংশ

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