React.Component — ক্লাস কম্পোনেন্ট এবং এরা কীভাবে কাজ করে

React.Component কী?

React.Component হলো একটি অ্যাবস্ট্রাক্ট ক্লাস যা স্টেট, প্রপস এবং কম্পোনেন্ট লাইফসাইকেল নিয়ে কাজ করার জন্য বিল্ট-ইন মেথড সরবরাহ করে। একটি ক্লাস কম্পোনেন্ট তৈরি করতে, আপনাকে React.Component-কে এক্সটেন্ড করে একটি ক্লাস ডিফাইন করতে হবে এবং render মেথড ইমপ্লিমেন্ট করতে হবে।

React.Component React-এর প্রথম ভার্সনে (2013) আবির্ভূত হয়েছিল এবং পাঁচ বছর ধরে কম্পোনেন্ট তৈরির প্রাথমিক উপায় ছিল। React ইকোসিস্টেম ক্লাসের চারপাশে নির্মিত হয়েছিল: হায়ার-অর্ডার কম্পোনেন্ট (HOC), render props, কনটেক্সট — এই সকল প্যাটার্ন ক্লাস সিনট্যাক্সের মাধ্যমে ইমপ্লিমেন্ট করা হয়েছিল।

2019 সালে React 16.8 রিলিজের সাথে, React টিম ক্লাসের বিকল্প হিসেবে হুকস উপস্থাপন করে। হুকস একই সমস্যা — স্টেট, ইফেক্ট, কনটেক্সট — সমাধান করেছিল, কিন্তু ইনহেরিটেন্স এবং জটিল কনটেক্সট বাইন্ডিং ছাড়াই। React.Component সম্পূর্ণরূপে সমর্থিত রয়ে গেছে, তবে নতুন প্রকল্পের জন্য ফাংশনাল পদ্ধতি সুপারিশ করা হয়।

ক্লাস কম্পোনেন্ট তৈরি করা

সর্বনিম্ন ক্লাস কম্পোনেন্ট হলো একটি ক্লাস যার একটি মাত্র render মেথড থাকে যা React এলিমেন্ট রিটার্ন করে। render একমাত্র বাধ্যতামূলক মেথড। এটি this.props এবং this.state-এর একটি বিশুদ্ধ ফাংশন হতে হবে: প্রপস এবং স্টেটের একই সেট একই ফলাফল উৎপন্ন করে।

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

কনস্ট্রাক্টর এবং স্টেট আরম্ভকরণ

কনস্ট্রাক্টর মাউন্টিংয়ের আগে এক্সিকিউট হয়। এটি প্যারেন্ট ক্লাসে প্রপস পাস করতে super(props) কল করে এবং this.state আরম্ভ করে। অন্যান্য উদ্দেশ্যে — সাবস্ক্রিপশন, API কল — কনস্ট্রাক্টর ব্যবহার করা সুপারিশ করা হয় না; এর জন্য componentDidMount রয়েছে।

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

this.state এবং this.setState-এর মাধ্যমে স্টেট ম্যানেজমেন্ট

this.state হলো একটি অবজেক্ট যা কম্পোনেন্টের ডেটা ধারণ করে। এটি সরাসরি মিউটেট করা (this.state.count = 1) নিষিদ্ধ — এটি পুনরায় রেন্ডার ট্রিগার করে না এবং পূর্বাভাসযোগ্যতা নষ্ট করে। স্টেট অবশ্যই this.setState-এর মাধ্যমে আপডেট করতে হবে, যা একটি নতুন স্টেট অবজেক্ট তৈরি করে এবং পুনরায় রেন্ডার ট্রিগার করে।

setState একটি অবজেক্ট বা ফাংশন গ্রহণ করতে পারে। ফাংশনাল ফর্মটি পছন্দনীয় যখন নতুন স্টেট পূর্ববর্তীটির উপর নির্ভর করে: this.setState(prev => ({ count: prev.count + 1 }))। React পারফরম্যান্স অপ্টিমাইজেশনের জন্য একাধিক setState কলকে একটি ব্যাচে গ্রুপ করতে পারে।

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

setState-এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য হলো এটি অ্যাসিনক্রোনাস। setState কল করার পর, স্টেট তাৎক্ষণিকভাবে আপডেট হয় না। আপডেটের পর কোনো কাজ করতে চাইলে দ্বিতীয় আর্গুমেন্ট হিসেবে একটি কলব্যাক পাস করুন: this.setState(newState, () => console.log(this.state))।

লাইফসাইকেল মেথড

ক্লাস কম্পোনেন্টের পূর্বনির্ধারিত মেথড থাকে যা React নির্দিষ্ট মুহূর্তে কল করে। মাউন্টিং — constructor → render → componentDidMount। আপডেট — render → componentDidUpdate। আনমাউন্টিং — componentWillUnmount।

ComponentDidMount — ডেটা আনয়ন

componentDidMount প্রথম রেন্ডারের পর সাইড ইফেক্টের জন্য প্রধান স্থান। এখানে HTTP অনুরোধ করা হয়, WebSocket সংযোগ স্থাপন করা হয় এবং টাইমার শুরু করা হয়। যদি componentWillUnmount-এ সাবস্ক্রিপশন পরিষ্কার না করেন, তাহলে মেমোরি লিক হয়।

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // Cancel request on unmount
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

মেথডে this কনটেক্সট বাইন্ডিং

JavaScript-এ, ক্লাস মেথড ডিফল্টভাবে ইনস্ট্যান্সের সাথে বাউন্ড থাকে না। আপনি যদি কোনো মেথড কলব্যাক হিসেবে পাস করেন — ইভেন্ট হ্যান্ডলারে, টাইমারে — তাহলে this হবে undefined (স্ট্রিক্ট মোডে) বা window (স্ট্রিক্ট মোড ছাড়া)। বাইন্ডিং ছাড়া, this.setState ত্রুটি ছুঁড়বে।

বাইন্ড করার তিনটি উপায় আছে: কনস্ট্রাক্টরে bind, কলব্যাকে অ্যারো ফাংশন, এবং অ্যারো ফাংশন সহ class field। প্রথম উপায়টি React-এর অফিসিয়াল সুপারিশ: কনস্ট্রাক্টরে একবার বাইন্ড করুন, প্রতি রেন্ডারে ফাংশন পুনরায় তৈরি না করে।

// Method 1: bind in constructor (recommended)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class fields — স্বয়ংক্রিয় বাইন্ডিং সহ আধুনিক সিনট্যাক্স। ক্লাস প্রপার্টিতে অ্যারো ফাংশন কনস্ট্রাক্টরের স্কোপ থেকে this ক্যাপচার করে। downside হলো মেথড প্রোটোটাইপে নয়, প্রতিটি ইনস্ট্যান্সে তৈরি হয়, যা একই ধরনের শত শত কম্পোনেন্টের জন্য মেমোরি ব্যবহার বাড়ায়।

ক্লাস বনাম ফাংশনাল কম্পোনেন্ট

ক্লাস এবং ফাংশনের মধ্যে পছন্দ শুধু সিনট্যাক্সের বিষয় নয়। হুকস সহ ফাংশনাল কম্পোনেন্ট ক্লাসে অন্তর্নিহিত সমস্যা সমাধান করে: বিভিন্ন লাইফসাইকেল মেথডে (componentDidMount + componentDidUpdate) লজিকের ডুপ্লিকেশন, this-এর জটিলতা এবং সম্পর্কিত লজিককে পুনর্ব্যবহারযোগ্য ব্লকে বের করতে না পারা।

ফাংশনাল কম্পোনেন্ট পরীক্ষা করা সহজ — এদের কোনো অভ্যন্তরীণ স্টেট নেই (যা হুকসের আগে শুধু ক্লাসে ছিল) এবং কলব্যাক যাচাইয়ের জন্য DOM মাউন্টিং প্রয়োজন হয় না। React সব নতুন প্রকল্পের জন্য ফাংশনাল কম্পোনেন্ট সুপারিশ করে; ডকুমেন্টেশন এবং উদাহরণ এদের সাথে লেখা হয়।

ক্লাস কম্পোনেন্ট লিগ্যাসি কোড নিয়ে কাজ করার সময় সেরা পছন্দ থাকে। যদি কোনো প্রকল্প 2019-এর আগে শুরু হয়, তাহলে এতে সম্ভবত হাজার হাজার ক্লাস কম্পোনেন্ট রয়েছে। একটি স্প্রিন্টে এদের সব হুকসে রিরাইট করা ঝুঁকিপূর্ণ। React পশ্চাৎগামী সামঞ্জস্যের গ্যারান্টি দেয়: ক্লাস কম্পোনেন্ট মুছে ফেলা হবে না।

ক্লাস থেকে হুকসে মাইগ্রেশন কৌশল

ধীরে ধীরে মাইগ্রেশন কম্পোনেন্ট বিশ্লেষণ দিয়ে শুরু হয়। স্টেট ছাড়া সাধারণ কম্পোনেন্ট প্রথমে অনুবাদ করা হয় — এগুলি তুচ্ছভাবে ফাংশন দিয়ে প্রতিস্থাপিত হয়। তারপর — এক বা দুই স্টেট ফিল্ডের কম্পোনেন্ট, যেখানে useState সরাসরি this.state এবং this.setState প্রতিস্থাপন করে।

একাধিক লাইফসাইকেল মেথডযুক্ত জটিল কম্পোনেন্ট useEffect-এর মাধ্যমে অনুবাদ করা হয়। componentDidMount + componentDidUpdate-এর লজিক ভিন্ন ভিন্ন নির্ভরতা সহ পৃথক useEffect কল-এ বিভক্ত করা হয়। componentWillUnmount-কে useEffect-এর ভেতরে রিটার্ন ফাংশন দিয়ে প্রতিস্থাপন করা হয়। জটিল স্টেট লজিকের জন্য useReducer ব্যবহার করুন।

স্বয়ংক্রিয় মাইগ্রেশন টুল — @phenomnomnominal/ts-react-class-to-hook বা codemod স্ক্রিপ্ট — সাধারণ ক্লাস স্বয়ংক্রিয়ভাবে রূপান্তর করতে পারে। জটিল ক্ষেত্রে, মাইগ্রেশন ম্যানুয়াল কাজ থেকে যায় যার জন্য উৎস কম্পোনেন্টের লজিক বোঝার প্রয়োজন হয়।