Lifecycle Methods (Mounting, Updating, Unmounting)

ReactJS-এ Lifecycle Methods হলো সেই মেথডগুলি যা একটি কম্পোনেন্টের জীবনচক্রের (life cycle) বিভিন্ন পর্যায়ে কার্যকর হয়। এই মেথডগুলি আপনাকে নির্দিষ্ট সময় বা অবস্থায় কম্পোনেন্টের আচরণ নিয়ন্ত্রণ করতে দেয়। React কম্পোনেন্টের জীবনচক্র তিনটি প্রধান পর্যায়ে বিভক্ত: Mounting, Updating, এবং Unmounting। প্রতিটি পর্যায়ে কিছু নির্দিষ্ট lifecycle methods কল হয়, যা আপনাকে বিভিন্ন কার্যক্রম যেমন ডেটা ফেচিং, সাবস্ক্রিপশন তৈরি বা ধ্বংস, এবং UI আপডেট করার সুযোগ দেয়।

১. Mounting (কম্পোনেন্টের তৈরি হওয়া)

Mounting পর্যায়ে একটি কম্পোনেন্ট প্রথমবারের মতো DOM-এ যুক্ত হয়। এই পর্যায়ে React কিছু মেথড কল করে, যা কম্পোনেন্টের প্রথম ইনিশিয়ালাইজেশন এবং UI রেন্ডার করতে ব্যবহৃত হয়।

• constructor()

  • এই মেথডটি কম্পোনেন্ট তৈরি হওয়ার সময় প্রথমে কল হয়। এখানে আপনি কম্পোনেন্টের state ইনিশিয়ালাইজ করতে পারেন এবং ইভেন্ট হ্যান্ডলারগুলোর জন্য this বাইন্ড করতে পারেন।

  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  

• static getDerivedStateFromProps()

  • এটি props এর পরিবর্তনের ভিত্তিতে state আপডেট করতে ব্যবহৃত হয়। এটি ফাংশন হিসেবে কাজ করে এবং কম্পোনেন্ট রেন্ডার হওয়ার আগে কল হয়।

  static getDerivedStateFromProps(nextProps, nextState) {
    // props এবং state এর উপর ভিত্তি করে state আপডেট করা
    return null;
  }
  

• render()

  • এটি মূল React কম্পোনেন্ট মেথড যা UI রেন্ডার করার জন্য ব্যবহৃত হয়। JSX কোড এখানে রেন্ডার হয়।

  render() {
    return <h1>Hello, World!</h1>;
  }
  

• componentDidMount()

  • এটি Mounting এর শেষে কল হয়, যখন কম্পোনেন্ট প্রথমবার DOM-এ রেন্ডার হয়। এখানে আপনি API কল, ডেটা ফেচিং, অথবা সাবস্ক্রিপশন তৈরি করতে পারেন।
  • সাধারণত, কম্পোনেন্ট মাউন্ট হওয়ার পর যেসব কাজ করতে হয়, সেগুলি এই মেথডে করা হয়।

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
  

২. Updating (কম্পোনেন্টের আপডেট হওয়া)

Updating পর্যায়ে কম্পোনেন্টের props বা state পরিবর্তিত হলে React কিছু মেথড কল করে, যা UI আপডেটের জন্য ব্যবহৃত হয়। এই পর্যায়ে আপনি বিভিন্ন লজিক প্রয়োগ করতে পারেন, যেমন একটি কম্পোনেন্টের রি-রেন্ডারিং কন্ট্রোল করা বা নতুন ডেটার উপর ভিত্তি করে UI আপডেট করা।

• static getDerivedStateFromProps()
  • এই মেথডটি Updating পর্যায়েও কল হয়, যখন props পরিবর্তিত হয়। এটি props পরিবর্তনের উপর ভিত্তি করে state আপডেট করার জন্য ব্যবহৃত হয়।

• shouldComponentUpdate()

  • এই মেথডটি আপনাকে বলে দেয় যে, কম্পোনেন্টটি রি-রেন্ডার হওয়া উচিত কি না। এটি অপটিমাইজেশন মেথড হিসেবে কাজ করে এবং আপনি যদি এটি false রিটার্ন করেন, তাহলে React ওই কম্পোনেন্টটি রি-রেন্ডার করবে না।
  • এটি বেশ কার্যকরী যখন আপনি বড় বা জটিল অ্যাপ্লিকেশন নিয়ে কাজ করছেন এবং রেন্ডারিং কমাতে চান।

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }
  

• render()
  • এটি একটি কম্পোনেন্টের UI রেন্ডার করার জন্য সবসময় কল হয় যখন তার state বা props পরিবর্তিত হয়। এটি JSX কোড রেন্ডার করে।

• getSnapshotBeforeUpdate()

  • এটি render() এর পরে এবং componentDidUpdate() এর আগে কল হয়। এখানে আপনি DOM এর একটি স্ন্যাপশট গ্রহণ করতে পারেন। এটি বিশেষ করে ব্যবহৃত হয় যখন আপনি DOM এর পূর্ববর্তী অবস্থান থেকে কোন পরিবর্তন ট্র্যাক করতে চান।

  getSnapshotBeforeUpdate(prevProps, prevState) {
    return null; // এখানে DOM স্ন্যাপশট গ্রহণ করা যেতে পারে
  }
  

• componentDidUpdate()

  • এটি render() মেথডের পরে কল হয়, যখন কম্পোনেন্ট আপডেট হয়। এখানে আপনি যে কোনো লজিক প্রয়োগ করতে পারেন, যেমন ডেটা আপডেট বা API কল করা।

  componentDidUpdate(prevProps, prevState) {
    if (this.state.count !== prevState.count) {
      console.log('Count has changed!');
    }
  }
  

৩. Unmounting (কম্পোনেন্টের মুছে ফেলা)

Unmounting পর্যায়টি ঘটে যখন একটি কম্পোনেন্ট আর DOM-এ থাকে না এবং সেটি মুছে ফেলা হয়। এখানে আমরা কম্পোনেন্টের ক্লিনআপ কাজগুলো করতে পারি, যেমন সাবস্ক্রিপশন বাতিল করা বা টাইমার বন্ধ করা।

• componentWillUnmount()

  • এই মেথডটি Unmounting পর্যায়ে কল হয়, যখন কম্পোনেন্ট DOM থেকে মুছে ফেলা হয়। এখানে আপনি টাইমার ক্লিনআপ, সাবস্ক্রিপশন বাতিল, বা অন্য কোনো রিসোর্স মুক্ত করতে পারেন।

  componentWillUnmount() {
    clearInterval(this.timerID); // টাইমার বন্ধ করা
  }
  

Lifecycle Methods এর গুরুত্ব

1. ডেটা ফেচিং এবং ইনিশিয়ালাইজেশন: componentDidMount() মেথডটি API কল এবং ডেটা ফেচিংয়ের জন্য ব্যবহৃত হয়, যা অ্যাপ্লিকেশন শুরু হওয়ার পর প্রয়োজনীয় ডেটা লোড করতে সহায়তা করে।
2. পারফরম্যান্স অপটিমাইজেশন: shouldComponentUpdate() মেথডটি কম্পোনেন্ট রি-রেন্ডারিং নিয়ন্ত্রণ করতে সাহায্য করে, যার মাধ্যমে আপনি unnecessary রি-রেন্ডারিং কমাতে পারেন এবং অ্যাপ্লিকেশনটির পারফরম্যান্স উন্নত করতে পারেন।
3. ক্লিনআপ কাজ: componentWillUnmount() মেথডটি কম্পোনেন্ট ধ্বংসের পূর্বে ক্লিনআপ কাজগুলো করার সুযোগ দেয়, যেমন ইভেন্ট হ্যান্ডলার বন্ধ করা, টাইমার মুছে ফেলা বা সাবস্ক্রিপশন বাতিল করা।
4. UI রেন্ডারিং নিয়ন্ত্রণ: Lifecycle methods, বিশেষ করে getDerivedStateFromProps() এবং render(), UI আপডেটের নিয়ন্ত্রণ দেয়, যাতে আপনি যথাযথভাবে কম্পোনেন্টের অবস্থান অনুযায়ী ইন্টারফেস পরিবর্তন করতে পারেন।

সারাংশ

ReactJS-এ Component Lifecycle মেথডগুলি আপনাকে একটি কম্পোনেন্টের বিভিন্ন পর্যায়ে কার্যকলাপ নিয়ন্ত্রণ করার সুযোগ দেয়। Mounting, Updating, এবং Unmounting পর্যায়ে থাকা বিভিন্ন মেথডগুলি অ্যাপ্লিকেশনের ডেটা ফেচিং, পারফরম্যান্স অপটিমাইজেশন এবং UI আপডেটের জন্য অত্যন্ত গুরুত্বপূর্ণ। React এর lifecycle methods ব্যবহারের মাধ্যমে আপনি আরও কার্যকরী, দ্রুত এবং মেইন্টেনেবল অ্যাপ্লিকেশন তৈরি করতে পারেন।