useState এর ব্যবহার এবং উদাহরণসহ বর্ণনা

useState হুক হলো React এর Hooks API এর একটি ফান্ডামেন্টাল অংশ, যা React এর ১৬.৮ ভার্সনে ব্যবহার চালু হয়েছে। আমরা জানি যে, React এ দুইভাবে কম্পোনেন্ট লেখা যায় – ক্লাস কম্পোনেণ্ট এবং ফাংশনাল কম্পোনেন্ট। বিশেষভাবে useState হুক সাধারণত ফাংশনাল কম্পোনেন্টে কাজ করে থাকে এবং এ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট করার ক্ষেত্রে সহযোগিতা করে। নিম্নে useState এর ব্যবহারের নিয়ম নিয়ে উদাহরণসহ বিস্তারিত আলোচনা শেয়ার করা হলো। তাহলে চলুন শুরু করা যাক –

ধাপ ১ – প্রথমে useState হুকটি React লাইব্রেরী থেকে ইমপোর্ট করতে হবে, যা কম্পোনেন্টের ঠিক উপরে থাকবে। ইমপোর্ট এর নমুনা –

import React, { useState } from "react";

ধাপ ২ – কম্পোনেন্টের এর মধ্যে রিটার্ণ কিওয়ার্ডের ঠিক উপরে useState ফাংশনটি কল করতে হবে, তার জন্য প্রথমে ‘const বা let’ লিখে একটি এ্যারে সাইন বা স্কয়ার ব্র্যকেট দিতে হবে ঐ এ্যারের মধ্যে দুইটি আরগুমেন্ট দিতে হবে, প্রথমটি স্টেট এর কারেন্ট ভ্যালু (count) এবং দ্বিতীয়টি কারেন্ট ভ্যালু কে আপডেট করার জন্য একটি ফাংশন (setCount)। তারপর এ্যাসাইনমেন্ট অপারেটর (=) দিয়ে useState ফাংশন কে কল দিয়ে স্টেট এর ইনিশিয়াল ভ্যালু প্রদান করতে হবে। (আমরা এখানে ইনিশিয়াল ভ্যালু ‘০’ পাস করেছি। কেননা আমাদের কাউন্টার ০ থেকে কাউন্ট শুরু হবে। তবে এখানে আপনার স্টেট এর উপর ভিত্তি করে ভ্যালু পাস করবেন।) তার নমুনা –

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

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>
  );
}

উদাহরণ বিশ্লেষণ –

প্রথম, React লাইব্রেরী থেকে useState হুক কে ইমপোর্ট করা হয়েছে।

দ্বিতীয়, Counter নামে একটি কম্পোনেন্ট তৈরি করে, তার মধ্যে return কিওয়ার্ড এর উপরে useState হুকের এ্যারে এর মধ্যে [count, setCount] নামে দুইটি আর্গুমেন্ট পাস করা হয়েছে এবং useState এর ফাংশন কলে ইনিশিয়াল ভ্যালু ‘0’ দেওয়া হয়েছে।

তৃতীয়, রিটার্ণ কিওয়ার্ডের পর <p> ট্যাগের মধ্যে ডাইন্যামিক ভাবে স্টেট এর কারেন্ট ভ্যালু পাস করা হয়েছে – {count}

চতুর্থ, বাটন এর মধ্যে onClick ইভেন্ট নিয়ে এর মধ্যে স্টেট এর setCount ফাংশন কল দিয়ে তার মধ্যে স্টেট এর কারেন্ট ভ্যালু এর সাথে ‘+ 1’ যোগ করা হয়েছে, যা বাটনের onClick ইভেন্ট ট্রিগারের সাথে সাথে setCount স্টেট এর ভ্যালু এক এক করে বৃদ্ধি করবে।

 

তবে, useSate এ আমরা ফাংশনালভাবে ভ্যালু আপডেট করতে পারি। সরাসরি নতুন স্টেট পাস করার পরিবর্তে, একটি ফাংশন পাস করার মাধ্যমে যা পূর্বের স্টেট গ্রহণ করে এবং নতুন স্টেট রিটার্ণ করে। তার নমুনা –

import React, { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>
        Increment
      </button>
    </div>
  );
}

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