Lifecycle Methods এবং API Calls

ReactJS-এ Lifecycle Methods এবং API Calls ব্যবহৃত হয় React কম্পোনেন্টের জীবনচক্র এবং ডেটা হ্যান্ডলিংয়ের জন্য। এই দুটি বিষয় React অ্যাপ্লিকেশনগুলোর কার্যকারিতা এবং পারফরম্যান্স নিয়ন্ত্রণে গুরুত্বপূর্ণ ভূমিকা পালন করে।

Lifecycle Methods

React কম্পোনেন্টের জীবনের বিভিন্ন ধাপ বা lifecycle stages এর মাধ্যমে React কে কম্পোনেন্টের অবস্থা এবং কার্যাবলি পরিচালনা করতে সহায়তা করে। Lifecycle Methods হল কিছু পূর্বনির্ধারিত ফাংশন যা React কম্পোনেন্টের বিভিন্ন জীবন্ত ধাপে স্বয়ংক্রিয়ভাবে কল হয়। এই মেথডগুলোকে ৩টি প্রধান পর্যায়ে ভাগ করা যায়:

1. Mounting (মাউন্টিং): কম্পোনেন্ট যখন DOM-এ প্রথমবার রেন্ডার হয়।
2. Updating (আপডেটিং): কম্পোনেন্ট যখন নতুন প্রপস (props) বা স্টেট (state) পায় এবং তা রেন্ডার হয়।
3. Unmounting (আনমাউন্টিং): কম্পোনেন্ট যখন DOM থেকে মুছে যায়।

১. Mounting Lifecycle Methods

এগুলি সেই সময়ের মেথড, যখন কম্পোনেন্ট প্রথমবার DOM-এ যুক্ত হয়।

• constructor(): এই মেথডটি কম্পোনেন্ট তৈরির সময় প্রথমে কল হয় এবং ইনিশিয়াল স্টেট সেট করা হয়।

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

• componentDidMount(): এই মেথডটি কম্পোনেন্ট DOM-এ রেন্ডার হওয়ার পর কল হয়। সাধারণত এখানে API কল বা ডেটা লোডিং করা হয়।

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

২. Updating Lifecycle Methods

কম্পোনেন্ট যখন তার স্টেট বা প্রপস পরিবর্তন করে এবং নতুন রেন্ডার হয়ে থাকে তখন এই মেথডগুলো কল হয়।

• shouldComponentUpdate(nextProps, nextState): এই মেথডটি স্টেট বা প্রপস পরিবর্তন হলে, এটি কম্পোনেন্টের রেন্ডারিং প্রয়োজন আছে কিনা তা সিদ্ধান্ত নেয়। এটি অপটিমাইজেশন করতে সহায়তা করে।

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

• componentDidUpdate(prevProps, prevState): এটি shouldComponentUpdate কল হওয়ার পরে, কম্পোনেন্ট রেন্ডার হওয়া এবং নতুন তথ্যের ভিত্তিতে কিছু কাজ করতে ব্যবহৃত হয়। সাধারণত এখানে API কল বা ডেটা আপডেট করা হয়।

  componentDidUpdate(prevProps, prevState) {
    if (this.state.counter !== prevState.counter) {
      console.log('Counter has been updated!');
    }
  }
  

৩. Unmounting Lifecycle Method

এটি তখন কল হয়, যখন কম্পোনেন্ট DOM থেকে মুছে যায়।

• componentWillUnmount(): এই মেথডটি কম্পোনেন্টের ডিকন্সট্রাকশনের সময় কল হয়। এখানে ক্লিনআপ অপারেশন যেমন টাইমার ক্লিয়ার করা বা সাবস্ক্রিপশন বন্ধ করা হয়।

  componentWillUnmount() {
    clearInterval(this.timer);
  }
  

API Calls in React

ReactJS-এ API কল (যেমন ফেচ API বা Axios ব্যবহার করে) সাধারণত কম্পোনেন্টের জীবনের বিভিন্ন ধাপে করা হয়, বিশেষ করে componentDidMount() বা useEffect() হুক ব্যবহার করে।

১. Fetching Data with componentDidMount()

React ক্লাস কম্পোনেন্টে API কল সাধারণত componentDidMount() মেথডে করা হয়, কারণ এই মেথডটি কম্পোনেন্ট রেন্ডার হওয়ার পর প্রথমবার কল হয়। উদাহরণস্বরূপ:

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

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

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
      </div>
    );
  }
}

এখানে, fetch() API ব্যবহার করে ডেটা নিয়ে state আপডেট করা হচ্ছে এবং কম্পোনেন্টে রেন্ডার করা হচ্ছে।

২. Fetching Data with useEffect() in Functional Components

ফাংশনাল কম্পোনেন্টে React Hooks এর মাধ্যমে API কল করা যায়। এখানে useEffect() হুক ব্যবহৃত হয়, যা কম্পোনেন্ট রেন্ডার হওয়ার পর API কল চালানোর জন্য ব্যবহৃত হয়।

import React, { useState, useEffect } from 'react';

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array to run only once

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
};

export default App;

এখানে, useEffect() হুক ডেটা ফেচিংয়ের জন্য ব্যবহৃত হচ্ছে, এবং ডেটা সফলভাবে পাওয়া গেলে তা স্টেটে সেট করা হচ্ছে।

৩. Error Handling in API Calls

API কল করার সময় কখনও কখনও এরর (যেমন নেটওয়ার্ক সমস্যা বা সার্ভার সমস্যা) ঘটতে পারে। তাই, Error Handling করা খুবই গুরুত্বপূর্ণ।

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => setData(data))
    .catch(error => console.error('There was a problem with the fetch operation:', error));
}, []);

এখানে, .catch() ব্যবহার করে API কলের সময় যেকোনো ত্রুটি (error) ধরা হচ্ছে এবং এটি কনসোলে লগ করা হচ্ছে।

সারাংশ

• Lifecycle Methods React কম্পোনেন্টের বিভিন্ন ধাপে ব্যবহৃত হয়, যেমন কম্পোনেন্টের মাউন্টিং, আপডেটিং এবং আনমাউন্টিং।
• API Calls React-এ ডেটা ফেচিংয়ের জন্য গুরুত্বপূর্ণ। ফাংশনাল কম্পোনেন্টে useEffect() এবং ক্লাস কম্পোনেন্টে componentDidMount() ব্যবহার করে API কল করা হয়।
• API কলের সময় ত্রুটি (error) হ্যান্ডলিং অত্যন্ত গুরুত্বপূর্ণ, যাতে অ্যাপ্লিকেশন আরও স্টেবল এবং ব্যবহারকারীর জন্য সঠিকভাবে কাজ করে।