React Lifecycle: একটি ওভারভিউ

React-এ একটি lifecycle তিনটি আলাদা ফেজে ভাবা যেতে পারে: mounting, updating, এবং unmounting। Mounting ঘটে যখন React কম্পোনেন্ট DOM-এ (Document Object Model) রেন্ডার হয়। когда उस কম্পোনেন্টে পরিবর্তন করা হয়, এটি updating ফেজে ঢুকে।

Lifecycle-এর update ফেজে, একটি সিরিজ ইন্টারন্যাল মেথড রান করে নতুন ইনফরমেশন চেক করতে এবং সেই কম্পোনেন্টটি রি-রেন্ডার করতে। Unmounting হলো সাদা একটি কম্পোনেন্ট DOM থেকে রিমুভ হয়।

এই আর্টিকেলে lifecycle-এর ব্যাপক implication এবং কিছু সাধারণভাবে ব্যবহৃত মেথড আলোচনা করা হয়েছে। আরও lifecycle মেথড আছে যেগুলো ব্যবহার করা যায় কিন্তু এখানে আলোচনা করা হয়নি। অন্যান্য lifecycle মেথড সম্পর্কে আরও জানতে এই ইন্ট্রোডাকশন রেফার করুন।

React Lifecycle কী?

যখন একটি কম্পোনেন্ট DOM-এ লোড হয়, এটি তার তিনটি ফেজ বা lifecycle-এর প্রথমটিতে ঢুকে। এই প্রথম ফেজকে mounting বলা হয়। এই ফেজে, কম্পোনেন্টটি যেমন eredetত ডিফাইন করা হয়েছিল সেভাবেই রেন্ডার হয়। এখন এটি ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করতে এবং দ্বিতীয় ফেজে ঢুকতে প্রস্তুত।

দ্বিতীয় ফেজে, ব্যবহারকারী কম্পোনেন্টের সাথে ইন্টারঅ্যাক্ট করেছে এবং কিছু পরিবর্তন করেছে। অধিকাংশ কেসে, ব্যবহারকারী একটি অ্যাকশন পারফর্ম করেছেন যা কম্পোনেন্টের state পরিবর্তন করেছে। এখন আমরা lifecycle-এর update ফেজে আছি।

Update ফেজে, React কম্পোনেন্টটি রি-রেন্ডার করবে পরিবর্তনগুলো দেখাতে। উপরের উদাহরণে state পরিবর্তন করে update ফেজ ট্রিগার করার ক্ষেত্রে, setState() মেথড কল হবে ইনিশিয়াল state পরিবর্তন করতে এবং রি-রেন্ডারিং প্রসেস শুরু করতে। setState-এ আরও জানতে এই ইন্ট্রোডাক্টরি আর্টিকেল পড়ুন।

শেষে, যখন আমরা একটি নির্দিষ্ট কম্পোনেন্ট থেকে নেভিগেট করে দূরে যাই, আমরা সেটাকে DOM থেকে ক্লিয়ার করতে পারি। এটিকে unmounting বলা হয় এবং lifecycle-এর তৃতীয় ফেজ। যদিও এই ফেজ আবশ্যক নয়, কিন্তু কম্পোনেন্ট-হেভি অ্যাপের জন্য এটি রিকমেন্ডেড।

সাধারণ Lifecycle মেথডগুলো

এখন আমরা React কম্পোনেন্টের lifecycle sequence জানি, আসুন কিছু সাধারণ lifecycle মেথড দেখি। Lifecycle মেথডগুলো হলো React মেথডগুলো যা lifecycle-এর বিভিন্ন স্টেজে কল হয়। उनमें से কিছু আবশ্যক আর কিছু অপশনাল। আমরা আবশ্যক এবং সাধারণভাবে ব্যবহৃত অপশনাল মেথডগুলো দেখব।

Mounting

একটি ক্লাস কম্পোনেন্ট মাউন্ট করার সময়, প্রথম সাধারণভাবে ব্যবহৃত অপশনাল মেথড হলো constructor() মেথড। কনস্ট্রাক্টর মেথডে কম্পোনেন্টের ইনিশিয়াল state সরাসরি ডিক্লেয়ার করা যায়।

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state= {
      currentUser : " "
    }
  }
}

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

আমাদের উদ্দেশ্যে, যখন এই কম্পোনেন্ট মাউন্ট হবে, আমরা অনুমান করব কেউ লগ ইন করেনি। একজন ইউজার লগ ইন করতে হলে, আমাদের একটি লগইন ফর্ম দরকার। এটা আমাদের প্রথম আবশ্যক মেথড, render()-এ আনেছে।

একটি কম্পোনেন্ট মাউন্ট করার জন্য একটি আবশ্যক মেথড হলো render() মেথড। ক্লাস কম্পোনেন্ট কনস্ট্রাক্ট হয়ে তার ইনিশিয়াল state সেট হওয়ার পর, আমরা অন্য একটি কম্পোনেন্ট বা HTML রেন্ডার করতে পারি।

render(){
  return (
    <LoginForm />
  )
}

render() এর সিনট্যাক্স এবং এর return স্টেটমেন্ট অন্যান্য মেথড থেকে কিছুটা ভিন্ন। লক্ষ্য করুন আমরা return-এর পর parentheses ব্যবহার করছি কার্লি ব্র্যাকেটের পরিবর্তে। এখানে return স্টেটমেন্টে, আমরা LoginForm কম্পোনেন্ট রেন্ডার করছি।

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

এই সিম্পল উদাহরণে, আমাদের একটি ইউজার আছে, John। সে তার পাসওয়ার্ড দিয়ে লগইন বাটন চাপে। এটি সার্ভারে একটি ফেচ রিকোয়েস্ট পাঠায় এবং সার্ভার John-এর ক্রেডেনশিয়ালস রেসপন্স দেয়। এখন John লগইন করা থাকায়, আমরা চাই সে লগ আউট করার সিদ্ধান্ত না নেওয়া পর্যন্ত লগইন করা থাকে।

এটি করতে, আমরা আরেকটি খুব সাধারণ অপশনাল মেথড ব্যবহার করতে পারি, componentWillMount()। যদি এই lifecycle মেথডটি কল হয়, তবে এটি কম্পোনেন্ট রেন্ডার হওয়ার পর এক্সিকিউট হবে। এটি আমাদের নতুন state সেট করার একটি ভালো জায়গা।

componentWillMount() {
  this.setState({ currentUser: "John" })
}

এখন, কম্পোনেন্ট রেন্ডার হওয়ার পর এবং মাউন্ট হওয়ার আগে, কম্পোনেন্টের state করেন্ট ইউজার John হিসেবে সেট হয়েছে। এমনকি পেজ রিফ্রেশ করলেও, state John-এ সেট থাকবে, তাই আমাদের ইউজার লগইন করা থাকবে।

setState() মেথড ব্যবহার করাও আমাদের lifecycle-এর update ফেজে আনে। যখন setState() কল হয়, এটি React-কে সিগন্যাল দেয় কম্পোনেন্টে একটি পরিবর্তন হয়েছে। React এখন কম্পোনেন্টটি রি-রেন্ডার করবে যেকোনো পরিবর্তন ইউজারকে দেখাতে। আমাদের কেসে, এটি দেখাবে যে John লগইন করেছেন।

Updating

Lifecycle-এর update stage-এ বেশ কিছু অপশনাল lifecycle মেথড আছে যা এই ইন্ট্রোডাকশনের স্কোপের বাইরে। আমাদের উদ্দেশ্যে যথেষ্ট হলো যখন একটি পরিবর্তন ডিটেক্ট হয় (সাধারণত setState-র সাথে), React আবশ্যক render() মেথডটি আবার কল করবে। তারপর কম্পোনেন্টটি রি-রেন্ডার হবে পরিবর্তনগুলো রিফ্লেক্ট করার জন্য।

Unmounting

একটি কম্পোনেন্টের lifecycle-এর ফাইনাল স্টেজকে unmounting বলা হয়। এখানে একটি কম্পোনেন্ট DOM থেকে রিমুভ হয়। যদিও আবশ্যক নয়, কিন্তু এটি কম্পোনেন্ট-হেভি অ্যাপকে আরও ইফিশিয়েন্টলি পারফর্ম করতে সাহায্য করে।

Unmounting-এ শুধু একটি অপশনাল মেথড আছে, componentWillUnmount()। আমাদের ইউজার, John, এখন লগ আউট করতে চায়। সে লগআউট বাটনে ক্লিক করলে, আমরা componentWillUnmount() ব্যবহার করে তার ইউজার প্রোফাইল DOM থেকে রিমুভ করতে পারি।

এই উদাহরণটি কিছুটা contrived, কিন্তু lifecycle-এর প্রতিটি স্টেজে কী ঘটছে সেটা স্পষ্টভাবে দেখাচ্ছে।

class UserContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentUser: " " }
  }
  componentWillMount() {
    this.setState({ currentUser: "John" })
  }
  logout = () => {
    this.setState({ currentUser: " " })
  }
  render() {
    if this.state.currentUser === "John" {
      return (
        <UserProfile />
        <button type="button" onclick={this.logout}>Logout</button>
      )
    } else {
      return(
        <button type="button>">Login</button>
      )
    }
  }
}
class UserProfile extends React.Component {
  componentWillUnmount() {
    alert("Logged Out")
  }
  render() {
    return (
      <h1>Welcome back, John!</h1>
    )
  }
}

আমাদের দুটি কম্পোনেন্ট আছে। প্রথমটি UserContainer এবং এটি শুধু UserProfile কম্পোনেন্টটি ধারণ করে। UserProfile-এ ইউজার ইনফরমেশন থাকে।

UserContainer-এ, আমরা আগের মতো আমাদের কম্পোনেন্ট কনস্ট্রাক্ট করি এবং ইনিশিয়াল state সেট করি। কম্পোনেন্টটি খুব সংক্ষিপ্ত সময়ের জন্য একটি লগইন বাটন সহ রেন্ডার হয়। কম্পোনেন্ট মাউন্ট হওয়ার ঠিক আগে, আমরা John-কে লগইন করাই। এর ফলে React কম্পোনেন্টটি আপডেট করে এবং John-এর ক্রেডেনশিয়ালস সহ রি-রেন্ডার করে।

এখন John লগইন করা থাকায়, আমরা UserProfile কম্পোনেন্ট রেন্ডার করি। এতে John-এর সকল ইউজার ইনফরমেশন থাকে, তাই সে লগ আউট করার সাথে সাথে আমাদের এটি DOM থেকে রিমুভ করতে হবে।

লগআউট বাটনে ক্লিক করলে, এটি আমাদের logout ফাংশন এক্সিকিউট করে যা সিম্পলি করেন্ট ইউজারকে ইনিশিয়াল state-এ ফেরত দিয়ে দেয় (খালি স্ট্রিং)। যেহেতু আমাদের logout ফাংশন setState কল করে, React কন্টেইনার কম্পোনেন্টটি রি-রেন্ডার করবে। এখন, এটি UserProfile কম্পোনেন্ট দেখাবে না এবং আমরা একটি পপ-আপ এলার্ট পাবো যা ইউজারকে নোটিফাই করবে সে লগ আউট করেছেন।

উপসংহার

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

এই গাইড এবং লিংক করা सप্লিমেন্টারি আর্টিকেলগুলো পড়ার পর, আপনার এখন React-এ lifecycle কী এবং কীভাবে নিজে গভীরে যেতে পারেন সেটার ধারণা আছে। সকল জটিল প্রোগ্রামিং কনসেপ্টের মতো, ডেইলি প্র্যাকটিস ডিটেইলস ওয়ার্ক আউট করতে সাহায্য করে।