React Lifecycle Methods (লাইফসাইকেল মেথডস) হল React এর এমন একটি ফিচার, যা ক্লাস কম্পোনেন্টের বিভিন্ন ধাপ এবং তাদের মধ্যে ঘটে যাওয়া কার্যকলাপ ট্র্যাক করতে সাহায্য করে। এগুলি ক্লাস কম্পোনেন্টের জীবনচক্রের বিভিন্ন পর্যায়ে অটোমেটিকভাবে কল হয়, যেমন যখন কম্পোনেন্ট তৈরি হয়, আপডেট হয়, অথবা ধ্বংস হয়। লাইফসাইকেল মেথডস React কম্পোনেন্টের কার্যকলাপ নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
React Lifecycle Phases
React কম্পোনেন্টের জীবনচক্র মূলত তিনটি ধাপে ভাগ করা যায়:
- Mounting: যখন কম্পোনেন্ট প্রথমবার DOM (Document Object Model) এ রেন্ডার হয়।
- Updating: যখন কম্পোনেন্টের প্রোপস বা স্টেট পরিবর্তিত হয় এবং পুনরায় রেন্ডার হয়।
- Unmounting: যখন কম্পোনেন্ট DOM থেকে রিমুভ হয়ে যায়।
Mounting Phase
এই পর্যায়ে কম্পোনেন্ট প্রথমবার রেন্ডার হয়। এখানে কিছু গুরুত্বপূর্ণ লাইফসাইকেল মেথড আছে:
১. constructor()
constructor() মেথড কম্পোনেন্টের প্রথমে কল হয়। এটি সাধারণত স্টেট ইনিশিয়ালাইজ এবং বাইন্ডিং কাজের জন্য ব্যবহার করা হয়।
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
}
২. static getDerivedStateFromProps()
এই মেথডটি প্রতিবার যখন কম্পোনেন্টের প্রোপস পরিবর্তিত হয়, তখন কল হয়। এটি স্টেট আপডেট করার জন্য ব্যবহার করা হয়। এটি একটি স্ট্যাটিক মেথড, তাই this কিওয়ার্ড অ্যাক্সেস করা যাবে না।
static getDerivedStateFromProps(nextProps, nextState) {
if (nextProps.someValue !== nextState.someValue) {
return { someValue: nextProps.someValue };
}
return null;
}
৩. render()
render() মেথডটি React কম্পোনেন্টের প্রধান মেথড। এটি কম্পোনেন্টের UI রেন্ডার করার জন্য ব্যবহৃত হয়। এই মেথডের মধ্যে আপনি JSX রিটার্ন করেন, যা পরবর্তীতে DOM এ রেন্ডার হয়।
render() {
return <h1>{this.state.count}</h1>;
}
৪. componentDidMount()
এই মেথডটি কম্পোনেন্ট রেন্ডার হওয়ার পর প্রথমবার কল হয়। এটি ডেটা লোড, সাবস্ক্রিপশন বা ইভেন্ট লিসেনার সেটআপ করার জন্য উপযুক্ত।
componentDidMount() {
console.log('Component has mounted');
}
Updating Phase
এই পর্যায়ে কম্পোনেন্টের প্রোপস বা স্টেট পরিবর্তিত হলে, এটি পুনরায় রেন্ডার হয়। এখানে কিছু গুরুত্বপূর্ণ লাইফসাইকেল মেথড আছে:
১. static getDerivedStateFromProps()
এই মেথডটি Mounting এবং Updating উভয় সময়ই কল হয়। যখন প্রোপস বা স্টেট পরিবর্তিত হয়, তখন এটি কল হয়ে থাকে।
২. shouldComponentUpdate()
এই মেথডটি রেন্ডারিং প্রক্রিয়া কন্ট্রোল করতে ব্যবহৃত হয়। যদি আপনি চান না যে কম্পোনেন্ট পুনরায় রেন্ডার হোক, তবে আপনি false রিটার্ন করতে পারেন। এটি প্রপার্টি এবং স্টেটের পরিবর্তন অনুযায়ী পুনরায় রেন্ডার নির্ধারণ করে।
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
৩. render()
render() মেথড আবার কল হয় যখন কম্পোনেন্টের প্রোপস বা স্টেট পরিবর্তিত হয় এবং React আবার DOM এ পরিবর্তন রেন্ডার করে।
৪. getSnapshotBeforeUpdate()
এই মেথডটি componentDidUpdate মেথডের আগে কল হয়। এটি DOM এর বর্তমান স্টেট শেয়ার করতে এবং পরবর্তী রেন্ডারিংয়ের জন্য তথ্য সংগ্রহ করতে ব্যবহৃত হয়।
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('Snapshot before update');
return null;
}
৫. componentDidUpdate()
এই মেথডটি তখন কল হয় যখন কম্পোনেন্টের স্টেট বা প্রোপস আপডেট হয়ে রেন্ডার হয়। এটি সাধারণত ডেটা ফেচিং বা অন্য কোনও ফাংশনালিটি ট্রিগার করতে ব্যবহৃত হয়।
componentDidUpdate(prevProps, prevState) {
console.log('Component has updated');
}
Unmounting Phase
এই পর্যায়ে কম্পোনেন্ট DOM থেকে রিমুভ হয়। এখানে একমাত্র গুরুত্বপূর্ণ লাইফসাইকেল মেথড হল:
১. componentWillUnmount()
এই মেথডটি কম্পোনেন্ট DOM থেকে রিমুভ হওয়ার আগে কল হয়। এটি ক্লিনআপ কাজ (যেমন, সাবস্ক্রিপশন বন্ধ করা, টাইমার মুছে ফেলা) করার জন্য ব্যবহৃত হয়।
componentWillUnmount() {
console.log('Component is about to unmount');
}
সারাংশ
React ক্লাস কম্পোনেন্টের লাইফসাইকেল মেথডগুলি কম্পোনেন্টের বিভিন্ন স্টেট পরিবর্তনের সময় কার্যকর হয় এবং ডেভেলপারদের কম্পোনেন্টের আচরণ নিয়ন্ত্রণ করতে সহায়তা করে। এই মেথডগুলো Mounting, Updating, এবং Unmounting ফেজে কাজ করে, যার মাধ্যমে আপনি কম্পোনেন্টের ডেটা লোডিং, রেন্ডারিং, সাবস্ক্রিপশন, এবং ক্লিনআপ কার্যক্রম নির্ধারণ করতে পারেন। React এর লাইফসাইকেল মেথডগুলি ভালোভাবে বুঝে ব্যবহার করলে React অ্যাপ্লিকেশনকে আরও দক্ষ এবং কার্যকরী করা সম্ভব।
ReactJS এর Component Lifecycle হল সেই প্রক্রিয়া যা প্রতিটি React কম্পোনেন্টের সৃষ্টি থেকে শুরু করে তার ধ্বংস পর্যন্ত ঘটে। এটি একটি ধারাবাহিক প্রক্রিয়া যা একটি কম্পোনেন্টের জীবনের বিভিন্ন পর্যায়ে কার্যক্রম নিয়ন্ত্রণ করে। React কম্পোনেন্টের lifecycle এর মাধ্যমে আমরা সেই সময়গুলিতে বিভিন্ন কাজ সম্পন্ন করতে পারি, যেমন ডেটা ফেচিং, সাবস্ক্রিপশন তৈরি, এবং UI আপডেট করা।
ReactJS-এ প্রতিটি কম্পোনেন্টের lifecycle এর কিছু নির্দিষ্ট পর্যায় থাকে, যা Mounting, Updating, এবং Unmounting নামে পরিচিত। এই জীবনচক্রের প্রতিটি পর্যায়ে বিশেষ ফাংশনালিটি বা মেথডে কাজ করা যায়।
Component Lifecycle এর পর্যায়
১. Mounting (কম্পোনেন্টের তৈরি হওয়া)
এটি সেই সময় যখন একটি কম্পোনেন্ট DOM-এ যুক্ত হয়। Mounting পর্যায়ে বিভিন্ন মেথড ট্রিগার হয় যা কম্পোনেন্টের প্রাথমিক ইনিশিয়ালাইজেশন করে।
constructor(): এই মেথডটি কম্পোনেন্ট তৈরি হওয়া শুরু হওয়ার সময় কল হয়। এখানে স্টেট ইনিশিয়ালাইজ এবং বাইন্ডিং করা যায়।static getDerivedStateFromProps(): এই মেথডটি props এর পরিবর্তনের উপর ভিত্তি করে state আপডেট করতে ব্যবহৃত হয়। এটি কম্পোনেন্ট রেন্ডার হওয়ার আগে কল হয়।render(): এটি ঐতিহ্যগতভাবে React কম্পোনেন্টের প্রধান মেথড, যেখানে JSX কোড রেন্ডার হয়।componentDidMount(): এটি Mounting এর শেষ পর্যায়ে কল হয়, যখন কম্পোনেন্ট প্রথমবার DOM-এ রেন্ডার হয়। এখানে API কল, ডেটা ফেচিং ইত্যাদি কাজ করা হয়।
২. Updating (কম্পোনেন্টের আপডেট হওয়া)
Updating পর্যায়টি ঘটে যখন কম্পোনেন্টের props অথবা state পরিবর্তিত হয়। এই পর্যায়টি মূলত কম্পোনেন্টের UI রি-রেন্ডারিং-এর জন্য কাজ করে।
static getDerivedStateFromProps(): এটি props পরিবর্তনের সময় state আপডেট করার জন্য আবারও কল হয়।shouldComponentUpdate(): এটি একটি অপটিমাইজেশন মেথড। এটি React কে বলে দেয় যে কম্পোনেন্টটির রি-রেন্ডার প্রয়োজন কিনা। যদি এটিfalseরিটার্ন করে, তবে রি-রেন্ডার হবে না।render(): যেহেতু state বা props পরিবর্তিত হতে পারে,render()আবারও কল হয়।getSnapshotBeforeUpdate(): এই মেথডটি রেন্ডার হওয়ার আগে কল হয়, এবং এটি আপনাকে DOM-এর পূর্ববর্তী স্টেটের একটি স্ন্যাপশট গ্রহণ করার সুযোগ দেয়।componentDidUpdate(): এটিrender()মেথডের পরে কল হয় এবং এটি DOM আপডেট হওয়া পরবর্তী সময় কাজ করে, যেমন কোন API কল বা ডেটা আপডেট।
৩. Unmounting (কম্পোনেন্টের মুছে ফেলা)
এটি সেই সময় যখন একটি কম্পোনেন্ট DOM থেকে মুছে ফেলা হয়। Unmounting পর্যায়টি তখন ঘটে যখন কম্পোনেন্টটি আর প্রয়োজনীয় থাকে না বা ব্যবহারকারী অন্য পৃষ্ঠায় চলে যায়।
componentWillUnmount(): এই মেথডটি কম্পোনেন্ট মুছে ফেলার আগে কল হয়। এখানে আপনি ক্লিনআপ কাজ করতে পারেন, যেমন সাবস্ক্রিপশন বাতিল করা বা টাইমার বন্ধ করা।
Component Lifecycle এর গুরুত্ব
১. ডেটা ফেচিং এবং ইনিশিয়ালাইজেশন
React কম্পোনেন্টের lifecycle মেথডগুলি ডেটা ফেচিং এবং ইনিশিয়ালাইজেশন অপারেশনগুলো করতে সহায়তা করে। যেমন, componentDidMount() মেথডটি API কল করার জন্য খুবই কার্যকরী। এই সময় আপনি ডেটা লোড করে স্টেট আপডেট করতে পারেন, যাতে UI রেন্ডার করার সময় প্রাপ্য ডেটা দেখানো যায়।
২. রেন্ডার অপটিমাইজেশন
shouldComponentUpdate() মেথডটি কম্পোনেন্টের রি-রেন্ডারিং প্রক্রিয়া অপটিমাইজ করতে ব্যবহার করা হয়। যদি props বা state এর কোনো পরিবর্তন না ঘটে, তাহলে আপনি unnecessary রেন্ডার প্রতিরোধ করতে পারেন, যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সহায়তা করে।
৩. ক্লিনআপ
componentWillUnmount() মেথডটি আপনাকে ক্লিনআপ কাজগুলো করার সুযোগ দেয়। যেমন, যদি কোনো সাবস্ক্রিপশন বা টাইমার থাকে, সেগুলো বন্ধ করা বা মেমরি মুক্তি করা জরুরি, যাতে আপনার অ্যাপ্লিকেশন সঠিকভাবে কাজ করে এবং মেমরি লিক (Memory Leak) এড়ানো যায়।
৪. UI আপডেট এবং ডাইনামিক ইন্টারঅ্যাকশন
React কম্পোনেন্টের lifecycle ফেজগুলো আপনাকে ডাইনামিক UI তৈরি করতে সহায়তা করে। UI আপডেটের সময় React আপনি যে পরিবর্তন করতে চান তা সঠিকভাবে রেন্ডার করবে, এবং componentDidUpdate() এর মাধ্যমে UI এর পরবর্তী স্টেট কার্যকরভাবে চিহ্নিত করতে পারবেন।
৫. অপারেশনাল এবং পারফরম্যান্স ফাইন-টিউনিং
ReactJS-এ lifecycle মেথডগুলো ব্যবহার করে আপনি অ্যাপ্লিকেশনের পারফরম্যান্স আরও উন্নত করতে পারেন। আপনার কম্পোনেন্টের প্রয়োজনীয় অপারেশন যেমন ডেটা লোড, API কল ইত্যাদি lifecycle মেথডগুলির মাধ্যমে সঠিক সময়ে সম্পন্ন করতে পারেন, ফলে অ্যাপ্লিকেশনটি আরও দ্রুত এবং কার্যকরী হবে।
উপসংহার
ReactJS-এ Component Lifecycle একটি অত্যন্ত গুরুত্বপূর্ণ ধারণা, যা আপনাকে আপনার কম্পোনেন্টের বিভিন্ন অবস্থায় কার্যক্রম নিয়ন্ত্রণ করার সুযোগ দেয়। ডেটা ফেচিং, অপটিমাইজেশন, ক্লিনআপ এবং UI আপডেটসহ আরও অনেক গুরুত্বপূর্ণ কাজের জন্য lifecycle মেথডগুলি ব্যবহৃত হয়। React অ্যাপ্লিকেশনের পারফরম্যান্স এবং কার্যকারিতা উন্নত করতে এই lifecycle মেথডগুলি অপরিহার্য।
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 এর গুরুত্ব
- ডেটা ফেচিং এবং ইনিশিয়ালাইজেশন:
componentDidMount()মেথডটি API কল এবং ডেটা ফেচিংয়ের জন্য ব্যবহৃত হয়, যা অ্যাপ্লিকেশন শুরু হওয়ার পর প্রয়োজনীয় ডেটা লোড করতে সহায়তা করে। - পারফরম্যান্স অপটিমাইজেশন:
shouldComponentUpdate()মেথডটি কম্পোনেন্ট রি-রেন্ডারিং নিয়ন্ত্রণ করতে সাহায্য করে, যার মাধ্যমে আপনি unnecessary রি-রেন্ডারিং কমাতে পারেন এবং অ্যাপ্লিকেশনটির পারফরম্যান্স উন্নত করতে পারেন। - ক্লিনআপ কাজ:
componentWillUnmount()মেথডটি কম্পোনেন্ট ধ্বংসের পূর্বে ক্লিনআপ কাজগুলো করার সুযোগ দেয়, যেমন ইভেন্ট হ্যান্ডলার বন্ধ করা, টাইমার মুছে ফেলা বা সাবস্ক্রিপশন বাতিল করা। - UI রেন্ডারিং নিয়ন্ত্রণ: Lifecycle methods, বিশেষ করে
getDerivedStateFromProps()এবংrender(), UI আপডেটের নিয়ন্ত্রণ দেয়, যাতে আপনি যথাযথভাবে কম্পোনেন্টের অবস্থান অনুযায়ী ইন্টারফেস পরিবর্তন করতে পারেন।
সারাংশ
ReactJS-এ Component Lifecycle মেথডগুলি আপনাকে একটি কম্পোনেন্টের বিভিন্ন পর্যায়ে কার্যকলাপ নিয়ন্ত্রণ করার সুযোগ দেয়। Mounting, Updating, এবং Unmounting পর্যায়ে থাকা বিভিন্ন মেথডগুলি অ্যাপ্লিকেশনের ডেটা ফেচিং, পারফরম্যান্স অপটিমাইজেশন এবং UI আপডেটের জন্য অত্যন্ত গুরুত্বপূর্ণ। React এর lifecycle methods ব্যবহারের মাধ্যমে আপনি আরও কার্যকরী, দ্রুত এবং মেইন্টেনেবল অ্যাপ্লিকেশন তৈরি করতে পারেন।
React ক্লাস কম্পোনেন্টে lifecycle methods (লাইফসাইকেল মেথড) ব্যবহৃত হয়, যেগুলি কম্পোনেন্টের বিভিন্ন জীবনচক্রের সময় ব্যবহৃত হয়। এই মেথডগুলির মধ্যে componentDidMount, componentDidUpdate, এবং componentWillUnmount হল কিছু গুরুত্বপূর্ণ lifecycle method, যেগুলি কম্পোনেন্টের রেন্ডারিং এবং স্টেট আপডেটের সময় বিশেষ কাজ করতে ব্যবহৃত হয়।
componentDidMount
componentDidMount হল একটি lifecycle method যা একটি কম্পোনেন্ট প্রথমবার DOM-এ মাউন্ট হওয়ার পর একবার চলতে থাকে। এই মেথডটি সাধারনত API কল, সাবস্ক্রিপশন সেটআপ, বা কোনো প্রাথমিক ডেটা লোডিং-এর জন্য ব্যবহৃত হয়। এটি কম্পোনেন্ট মাউন্ট হওয়ার পর একবারই এক্সিকিউট হয়।
ব্যবহারের উদাহরণ:
class MyComponent extends React.Component {
componentDidMount() {
console.log("Component has mounted!");
// API কল অথবা ডেটা লোডিং
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => this.setState({ data }));
}
render() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
}
এখানে, componentDidMount API থেকে ডেটা লোড করার জন্য ব্যবহৃত হচ্ছে এবং কম্পোনেন্টের মাউন্ট হওয়ার পর একবারই রান হয়।
componentDidUpdate
componentDidUpdate হল একটি lifecycle method যা যখন কম্পোনেন্টের স্টেট বা প্রপস (props) পরিবর্তিত হয় এবং কম্পোনেন্ট রেন্ডার হয়ে যায় তখন এক্সিকিউট হয়। এটি ডিবাগিং বা পরবর্তী রেন্ডারিংয়ের জন্য কিছু কাজ করার জন্য ব্যবহৃত হয়, যেমন API কল বা নতুন ডেটার উপর ভিত্তি করে কোনো কাজ করা।
ব্যবহারের উদাহরণ:
class MyComponent extends React.Component {
componentDidUpdate(prevProps, prevState) {
if (this.state.count !== prevState.count) {
console.log('Count has been updated!');
}
}
render() {
return (
<div>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment Count
</button>
<p>Count: {this.state.count}</p>
</div>
);
}
}
এখানে, componentDidUpdate কম্পোনেন্টের স্টেট আপডেট হওয়ার পর এক্সিকিউট হয় এবং পূর্ববর্তী স্টেটের সাথে নতুন স্টেটের তুলনা করে কোনো পরিবর্তন ঘটে কিনা তা চেক করে।
componentWillUnmount
componentWillUnmount হল একটি lifecycle method যা কম্পোনেন্ট DOM থেকে আনমাউন্ট হওয়ার আগে এক্সিকিউট হয়। এটি সাধারণত সাবস্ক্রিপশন পরিষ্কার, টাইমার ক্লিয়ার বা অন্যান্য সাফ করার কাজের জন্য ব্যবহৃত হয়। এটি কম্পোনেন্টটি DOM থেকে সরানোর আগে যে কোনো ক্লিনআপ কার্যাবলী পরিচালনা করতে সাহায্য করে।
ব্যবহারের উদাহরণ:
class MyComponent extends React.Component {
componentWillUnmount() {
console.log("Component is being unmounted!");
// ক্লিনআপ কাজ যেমন: টাইমার বা সাবস্ক্রিপশন বন্ধ করা
clearInterval(this.timerID);
}
render() {
return (
<div>
<p>Timer will be cleaned up when component is unmounted.</p>
</div>
);
}
}
এখানে, componentWillUnmount টাইমার ক্লিয়ার করার জন্য ব্যবহৃত হচ্ছে যখন কম্পোনেন্টটি DOM থেকে সরানো হয়।
সারাংশ
componentDidMount: কম্পোনেন্ট মাউন্ট হওয়ার পর একবার রান হয়, সাধারণত API কল বা প্রথমবার ডেটা লোডিং করার জন্য ব্যবহৃত হয়।componentDidUpdate: কম্পোনেন্টের প্রপস বা স্টেট পরিবর্তিত হওয়ার পর রান হয়, এবং পূর্বের স্টেট বা প্রপসের সাথে তুলনা করে কোনো কাজ করা যায়।componentWillUnmount: কম্পোনেন্ট DOM থেকে আনমাউন্ট হওয়ার আগে এক্সিকিউট হয়, সাধারণত ক্লিনআপ কাজ (যেমন টাইমার বন্ধ করা বা সাবস্ক্রিপশন পরিষ্কার) করার জন্য ব্যবহৃত হয়।
এই lifecycle methods গুলি React ক্লাস কম্পোনেন্টের মধ্যে কার্যকরভাবে ব্যবহৃত হতে পারে, এবং ফাংশনাল কম্পোনেন্টে Hooks এর মাধ্যমে তাদের কার্যকারিতা অর্জন করা যায়।
ReactJS-এ Lifecycle Methods এবং API Calls ব্যবহৃত হয় React কম্পোনেন্টের জীবনচক্র এবং ডেটা হ্যান্ডলিংয়ের জন্য। এই দুটি বিষয় React অ্যাপ্লিকেশনগুলোর কার্যকারিতা এবং পারফরম্যান্স নিয়ন্ত্রণে গুরুত্বপূর্ণ ভূমিকা পালন করে।
Lifecycle Methods
React কম্পোনেন্টের জীবনের বিভিন্ন ধাপ বা lifecycle stages এর মাধ্যমে React কে কম্পোনেন্টের অবস্থা এবং কার্যাবলি পরিচালনা করতে সহায়তা করে। Lifecycle Methods হল কিছু পূর্বনির্ধারিত ফাংশন যা React কম্পোনেন্টের বিভিন্ন জীবন্ত ধাপে স্বয়ংক্রিয়ভাবে কল হয়। এই মেথডগুলোকে ৩টি প্রধান পর্যায়ে ভাগ করা যায়:
- Mounting (মাউন্টিং): কম্পোনেন্ট যখন DOM-এ প্রথমবার রেন্ডার হয়।
- Updating (আপডেটিং): কম্পোনেন্ট যখন নতুন প্রপস (props) বা স্টেট (state) পায় এবং তা রেন্ডার হয়।
- 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) হ্যান্ডলিং অত্যন্ত গুরুত্বপূর্ণ, যাতে অ্যাপ্লিকেশন আরও স্টেবল এবং ব্যবহারকারীর জন্য সঠিকভাবে কাজ করে।
Read more
