ReactJS-এ state management একটি অত্যন্ত গুরুত্বপূর্ণ কনসেপ্ট, যা ব্যবহারকারীর ইন্টারঅ্যাকশন, ডেটা আপডেট এবং অ্যাপ্লিকেশনের UI রেন্ডারিং পরিচালনা করতে সাহায্য করে। state হলো একটি অবজেক্ট যা কম্পোনেন্টের ডেটা বা অবস্থা (status) ধারণ করে, এবং এটি কম্পোনেন্টের রেন্ডারিং ও উপস্থাপনাকে প্রভাবিত করে। React কম্পোনেন্ট যখন কোনো পরিবর্তন পায়, তখন state আপডেট হয় এবং React সেই পরিবর্তন অনুযায়ী UI রেন্ডার করে।
State কী?
state হল React কম্পোনেন্টের একটি গুরুত্বপূর্ণ অংশ যা কম্পোনেন্টের আভ্যন্তরীণ ডেটা বা অবস্থা ধারণ করে। প্রতিটি React কম্পোনেন্টের নিজস্ব state থাকতে পারে, এবং যখন এটি পরিবর্তিত হয়, তখন React ঐ কম্পোনেন্টকে পুনরায় রেন্ডার করে। এটি ব্যবহৃত হয় ব্যবহারকারীর ইনপুট বা ডাইনামিক ডেটার সঙ্গে ইন্টারঅ্যাকশনের জন্য।
React কম্পোনেন্টের state সাধারণত একটি অবজেক্ট হিসেবে থাকে, যেখানে বিভিন্ন প্রপার্টি থাকে, যেগুলো UI কে প্রভাবিত করে।
State এর মাধ্যমে Component আপডেট করা
React কম্পোনেন্টে state আপডেট করার জন্য দুটি প্রধান ফাংশন ব্যবহার করা হয়:
- this.setState() (Class কম্পোনেন্টে)
- useState() (Function কম্পোনেন্টে)
১. Class কম্পোনেন্টে State Management
Class কম্পোনেন্টে state ম্যানেজ করার জন্য this.state ব্যবহার করা হয়। state আপডেট করার জন্য this.setState() ফাংশন ব্যবহার করা হয়, যা কম্পোনেন্টের UI রেন্ডার করে নতুন state এর সাথে।
উদাহরণ:
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default Counter;
এখানে:
this.state.countদিয়ে কম্পোনেন্টের স্টেটের মান পাওয়া যাচ্ছে।this.setState()ব্যবহার করে স্টেট আপডেট করা হচ্ছে, যা কম্পোনেন্টের UI পুনরায় রেন্ডার করে।
২. Function কম্পোনেন্টে State Management (useState Hook)
React 16.8 থেকে useState হুকের মাধ্যমে ফাংশন কম্পোনেন্টেও state ব্যবহার করা সম্ভব। useState একটি ফাংশন যা একটি স্টেট ভ্যারিয়েবল এবং সেই স্টেটকে আপডেট করার জন্য একটি ফাংশন রিটার্ন করে।
উদাহরণ:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
export default Counter;
এখানে:
useState(0)স্টেটের প্রাথমিক মান 0 সেট করে।setCountফাংশন ব্যবহার করেcountস্টেটের মান পরিবর্তন করা হয়।useStateফাংশন স্টেট ভ্যারিয়েবল (count) এবং সেটার আপডেট করার ফাংশন (setCount) দেয়।
State এর মাধ্যমে Component আপডেট করার প্রক্রিয়া
React এ state আপডেট হলে, React ওই কম্পোনেন্টের UI রেন্ডার করে যাতে নতুন state এর মান উপস্থাপন করা যায়। React তার ভার্চুয়াল DOM ব্যবহার করে UI-এর মধ্যে পার্থক্য চিহ্নিত করে এবং সেই অনুযায়ী DOM আপডেট করে। এর ফলে, কম্পোনেন্টের UI দ্রুত এবং দক্ষতার সঙ্গে পরিবর্তিত হয়।
স্টেট আপডেটের জন্য কিছু পদ্ধতি:
- Asynchronous Update:
this.setState()বাsetCount()ফাংশন যখন কল করা হয়, তখন state আপডেটটা অ্যাসিনক্রোনাস (asynchronous) হয়। এর মানে হল যে, state আপডেট হওয়ার পরপরইsetStateবাsetCount-এর পরবর্তী লাইনটি এক্সিকিউট হয়, কিন্তু UI রেন্ডার হবে পরবর্তীতে। - State Merge: Class কম্পোনেন্টে,
this.setState()এর মাধ্যমে state আপডেট করার সময়, এটি শুধুমাত্র যে প্রপার্টি পরিবর্তন হবে, তা আপডেট করবে, বাকি প্রপার্টিগুলো অপরিবর্তিত থাকবে। তবে, ফাংশন কম্পোনেন্টেuseState-এর মাধ্যমে পুরো state আবার সেট করতে হয়, না হলে পুরনো state হারিয়ে যেতে পারে।
State এর গুরুত্ব এবং ব্যবহারের সুবিধা
১. ডাইনামিক UI রেন্ডারিং
State ব্যবহার করে React কম্পোনেন্টে ডাইনামিক কন্টেন্ট রেন্ডার করা যায়। যখন state পরিবর্তিত হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়, যার ফলে অ্যাপ্লিকেশনে ব্যবহারকারীর ইন্টারঅ্যাকশনের ফলস্বরূপ UI রিয়েক্ট করে।
২. ইন্টারঅ্যাকটিভ কম্পোনেন্ট তৈরি
State ব্যবহারের মাধ্যমে কম্পোনেন্টে ইন্টারঅ্যাকশনের জন্য প্রয়োজনীয় ডেটা পরিবর্তন এবং সেটি UI-তে রিফ্লেক্ট করা সম্ভব হয়। যেমন, ফর্মের ইনপুট, বাটন ক্লিক, স্ক্রল ইত্যাদি ইন্টারঅ্যাকশনে state পরিবর্তিত হয়ে UI পরিবর্তিত হয়।
৩. ডেটা স্টোরেজ
State একটি কম্পোনেন্টের ডেটা বা অবস্থা সংরক্ষণ করে। যখন কম্পোনেন্টের মধ্যে কোন তথ্য পরিবর্তন হয়, তখন তা state-এ আপডেট করা হয় এবং UI আপডেট করা হয়। এতে করে ডেটার সর্বশেষ অবস্থা সবসময় UI তে রিফ্লেক্ট করা যায়।
সারাংশ
ReactJS-এ state ব্যবস্থাপনা একটি অত্যন্ত গুরুত্বপূর্ণ কনসেপ্ট, যা কম্পোনেন্টের আভ্যন্তরীণ ডেটা এবং UI রেন্ডারিং নিয়ন্ত্রণ করে। React এর মাধ্যমে আপনি state ব্যবহার করে ডাইনামিক এবং ইন্টারঅ্যাকটিভ UI তৈরি করতে পারেন। Class কম্পোনেন্টে this.setState() এবং ফাংশন কম্পোনেন্টে useState() ব্যবহৃত হয় state আপডেট করার জন্য, যা কম্পোনেন্টের UI স্বয়ংক্রিয়ভাবে পুনরায় রেন্ডার করে।
Read more
