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 এর মাধ্যমে তাদের কার্যকারিতা অর্জন করা যায়।
Read more
