React-এ setState দিয়ে State ম্যানেজ করা

একটি অ্যাপ্লিকেশনের state ট্র্যাক রাখা হলো কীভাবে একটি সিঙ্গল পেজ অ্যাপ্লিকেশন (SPA) পরিবর্তনগুলো রেজিস্টার করে এবং সেগুলো ব্যবহারকারীর কাছে রেন্ডার করে। একটি মডেল, ভিউ, কন্ট্রোলার (MVC) ফ্রেমওয়ার্কের বিপরীতে, SPA-গুলো ব্যবহারকারীকে রিডাইরেক্ট করে না, এবং তাই ক্লায়েন্ট সাইড থেকে আসা পরিবর্তনগুলো ম্যানেজ করার একটি উপায় দরকার। MVC ফ্রেমওয়ার্ক রিভিউ করতে এই গাইড রেফার করুন।

React-এ, কম্পোনেন্টগুলো নিজস্ব state ম্যানেজ করতে পারে এবং সেই অনুযায়ী রি-রেন্ডার করতে পারে। এটি lifecycle methods-এর মাধ্যমে করা হয়, যা এখানে গভীরে আলোচনা করা হয়েছে। এই আর্টিকেলের উদ্দেশ্যে, আমরা setState ব্যবহার করে state কীভাবে পরিবর্তন করতে হয় সেটা দেখব।

এই গাইড React-এ বেসিক পরিচিতি অনুমান করে। React বেসিক্স রিভিউ বা শিখতে, এই আর্টিকেলে কিছু সেরা React লার্নিং রিসোর্স লিস্ট করা আছে।

React setState কী?

React setState মেথড হলো কীভাবে একটি কম্পোনেন্টের state স্থিতিশীলভাবে (with stability) পরিবর্তন করতে হয়। React-এ state পরিবর্তন করার কিছু নির্দিষ্ট গাইডলাইন আছে।

setState শুধু একটি ক্লাস কম্পোনেন্টের ভিতরে কল করা যায়। ক্লাস কম্পোনেন্ট constructor() মেথড কল করে এবং একটি ইনিশিয়াল state সেট করে। তারপর আমরা setState কল করে আরও নিচে state পরিবর্তন করতে পারি।

React-এ দুটি ধরনের কম্পোনেন্ট আছে। ফাংশনাল কম্পোনেন্ট এবং ক্লাস কম্পোনেন্ট। আমাদের উদ্দেশ্যে, আমরা শুধু ক্লাস কম্পোনেন্ট রেফার করছি। আরও রিভিউ করতে, ফাংশনাল এবং ক্লাস কম্পোনেন্টের পার্থক্য সম্পর্কে এই আর্টিকেল চেক আউট করুন।
শুধু ক্লাস কম্পোনেন্টে setState কল করে, আমরা this কীওয়ার্ড ব্যবহার করে সরাসরি কম্পোনেন্টটিকে রেফারেন্স করতে পারি। this.setState() কল করা বেস্ট প্র্যাকটিস এবং নিশ্চিত করে আপনার কোড ব্রেক হবে না।
State সরাসরি মডিফাই করবেন না। State সরাসরি মডিফাই করলে React-কে রি-রেন্ডার করার জন্য রেজিস্টার হবে না। State পরিবর্তন করার পুরো পয়েন্ট হলো সেই কম্পোনেন্টটি রি-রেন্ডার করতে যাতে পরিবর্তনগুলো ব্যবহারকারীর কাছে রিফ্লেক্ট হয়।

এখন, এই গাইডলাইনগুলোর কনটেক্সটে সিনট্যাক্স দেখি।

setState React সিনট্যাক্স

প্রথম গাইডলাইন দিয়ে শুরু করি, আমরা দেখি setState শুধু একটি ক্লাস কম্পোনেন্টের ভিতরে ব্যবহার করা যায়। উদাহরণ হিসেবে, ধরুন আমাদের একটি শপিং অ্যাপ আছে এবং আমরা একটি শপিং কার্ট ইমপ্লিমেন্ট করতে চাই। আমরা Cart নামে একটি ক্লাস কম্পোনেন্ট সেট আপ করতে পারি। এই কম্পোনেন্টটি নিজস্ব state ম্যানেজ করার জন্য দায়বদ্ধ হবে যখন একজন ব্যবহারকারী কার্টে একটি আইটেম যোগ করবে।

class Cart extends React.Component {
  constructor(props){
    super(props);
    this.state = {shoppingCart: []}
  }
}

উপরের কোড ব্রেক ডাউন করলে, আমরা Cart ক্লাস কম্পোনেন্ট ডিক্লেয়ার করি। সকল ক্লাস কম্পোনেন্টের মতো, আমরা extend করি React.Component। এটি বয়লারপ্লেট React সিনট্যাক্স।

যেহেতু আমরা এই কম্পোনেন্টে state অ্যাসাইন করতে চাই, আমাদের constructor মেথড কল করতে হবে। তারপর, বেস constructor super(props) দিয়ে কল করা হয়। বেস constructor props ছাড়া কল হওয়া সম্ভব। অফিসিয়াল React ডকুমেন্টেশন আর্গুমেন্ট দেয় যে বেস constructor মেথড সবসময় props সহ কল করা উচিত।

এখন যেহেতু আমরা ক্লাস কম্পোনেন্ট কনস্ট্রাক্ট করে ইনিশিয়াল state ধারণ করার জন্য রিকোয়ার্ড React সিনট্যাক্সের মধ্য দিয়ে এসেছি, আমরা আমাদের ইনিশিয়াল state অ্যাসাইন করার জন্য প্রস্তুত। এটি একমাত্র সময় যখন আমরা সরাসরি state রেফারেন্স করতে পারি। this.state = {shoppingCart: [] } কল করে state অ্যাসাইন করা আমাদের শপিং কার্টের ইনিশিয়াল state কে একটি খালি অ্যারে সেট করার অনুমতি দেয়।

React setState উদাহরণ

উপরের সেকশনে, আমরা ইনিশিয়াল state ডিক্লেয়ার করার সিনট্যাক্স নিয়ে আলোচনা করেছি। একবার state constructor মেথডে সেট হলে, আমরা সাধারণভাবেই রেন্ডার করতে পারি:

class Cart extends React.Component {
  constructor(props) {
    super(props);
    this.state = { shoppingCart: [] }
  }
  render() {
    return (
      <div>
        <h1>Your Shopping Cart</h1>
        <div>{this.state.shoppingCart}</div>
      </div>
    );
  }
}
ReactDOM.render(
  <Cart />,
  document.getElementById('root')
);

এখানে, আমাদের একটি Cart ক্লাস কম্পোনেন্ট আছে যার ইনিশিয়াল state সেট করা আছে এবং render মেথডের return স্টেটমেন্টে কার্ট রেন্ডার করছে। আসুন দেখি কীভাবে আমরা setState ব্যবহার করে আমাদের Cart আপডেট করতে পারি।

আমরা একটি ফাংশন ডিফাইন করি যা আমাদের shoppingCart-এ একটি নতুন আইটেম যোগ করবে পূর্বে যোগ করা আইটেমগুলো সংরক্ষণ করে। আমরা জাভাস্ক্রিপ্টের spread operator (...) ব্যবহার করি ইনিশিয়াল state-এর একটি কপি বানাতে এবং নতুন state-এ আপডেট করতে। এইভাবে, শপিং কার্ট যোগ করা সকল আইটেম ধারণ করবে।

addItem(newItem) {
  this.setState({
    shoppingCart: [...this.state.shoppingCart, newItem]
  })
}

addItem ফাংশনটি React-এর onClick অ্যাট্রিবিউটে একটি বাটনের ভিতরে ব্যবহার করা যেতে পারে যদি আমরা চাই ব্যবহারকারী বাটন ক্লিক করলে সেই আইটেমটি যোগ করতে পারে। আমাদের উদ্দেশ্যে, একটি ফাংশনের কনটেক্সটে setState কীভাবে ব্যবহার করতে হয় সেটা দেখলেই যথেষ্ট।

এই আর্টিকেলটি setState কীভাবে ব্যবহার করতে হয় সেটা বুঝতে একটি ইন্ট্রোডাকশন হিসেবে বিল্ড করা হয়েছে এবং কোনো মানে এক্সহাস্টিভ (exhaustive) নয়।

উপসংহার

এই আর্টিকেলে, আমরা শিখেছি setState কী, এর ব্যবহার করার কিছু গাইডলাইন, সিনট্যাক্স, এবং একটি সংক্ষিপ্ত উদাহরণ। এটি একটি প্রাইমার আর্টিকেল হিসেবে বিল্ড করা হয়েছে যাতে আপনি আরও গভীরে যান এবং নিজে কম্পোনেন্টের state আপডেট করার প্র্যাকটিস করুন।

অফিসিয়াল React ডকুমেন্টেশনে আরও উদাহরণ আছে যা আরও প্র্যাকটিসের সুযোগ দেবে। মনে রাখবেন যে সিঙ্গল পেজ অ্যাপ্লিকেশনে, একটি কম্পোনেন্টের state ট্র্যাক রাখা ব্যবহারকারীর কাছে পরিবর্তনগুলো রেন্ডার করার জন্য অপরিহার্য।