Exploring the React component lifecycle: A guide to understanding the different phases.

এই ব্লগে রিয়েক্ট কম্পোনেন্ট লাইফসাইকেল,  এবং তার বিভিন্ন ফেইস সমপর্কে উদাহরণ দিয়ে ব্যাখা করবো যাতে বুঝতে সুবিধা হয়।

রিয়েক্ট কম্পোনেন্টস

লাইফসাইকেলে যাওয়ার আগে,  রিয়েক্ট কম্পোনেন্ট কি তা আগে জেনে নেই।
কম্পোনেন্ট হচ্ছে ইউজার ইন্টরফেসের বিল্ডিং ব্লক। রিয়েক্ট কম্পোনেন্ট দুই প্রকারের আছে 

1. ফাংশনাল কম্পোনেন্ট 
2. ক্লাস কম্পোনেন্ট 

ফাংশনাল কম্পোনেন্ট অতি সহজ এটা জাভাস্ক্রিপ্ট ফাংশনের মতো।  ফাংশনাল কম্পোনেন্টের বড় সুবিধা হচ্ছে এখানে হুক(Hook) আছে।  যা দিয়ে সহজেই স্টেট ম্যানেজ করা যায় যা ক্লাস কম্পোনেন্ট দিয়ে করা কঠিন

কম্পোনেন্ট লাইফসাইকেলের ধাপ

কম্পোনেন্ট লাফসাইকেল ৩টি মেইন ফেইস দিয়ে গঠিত। মাউন্টিং,  আপডেটিং, আনমাউন্টিং। নিচে এদের ব্যাখা দেয়া হলো

মাউন্টিং:
Mounting পর্যায়ে React DOM-এ নতুন একটি কম্পোনেন্ট যুক্ত করে। এই ধাপে কয়েকটি গুরুত্বপূর্ণ lifecycle method রয়েছে:

class Welcome extends React.Component {

    constructor(props) {

      super(props);

      this.state = { message: "Hello, World!" };

    }

    render() {

      return <h1>{this.state.message}</h1>;

    }

  }

constructor()

• এটি কম্পোনেন্টের প্রথম মেথড।
• state এবং props এর প্রাথমিক মান নির্ধারণে ব্যবহৃত হয়।

render()

• এটি একটি আবশ্যিক মেথড যা JSX রিটার্ন করে।
• কম্পোনেন্ট কিভাবে DOM-এ প্রদর্শিত হবে, তা নির্ধারণ করে।

componentDidMount()

• এটি তখনই কল হয়, যখন কম্পোনেন্ট DOM-এ যুক্ত হয়।
• সাধারণত, API কল বা ডেটা ফেচিংয়ের জন্য এটি ব্যবহৃত হয়।

componentDidMount() {

    fetch('https://api.example.com/data')

      .then(response => response.json())

      .then(data => this.setState({ data }));

  }

আপডেটিং:

shouldComponentUpdate()

• এই মেথডের মাধ্যমে নির্ধারণ করা যায়, কম্পোনেন্টটি আপডেট হবে কিনা।
• এটি পারফরম্যান্স উন্নত করতে ব্যবহৃত হয়।

render()

• কম্পোনেন্ট আপডেট হওয়া শেষে এটি কল হয়।
• ডেটা ফেচিং বা DOM ম্যানিপুলেশনের জন্য এটি কার্যকর।

componentDidUpdate()

• এটি তখনই কল হয়, যখন কম্পোনেন্ট DOM-এ যুক্ত হয়।
• সাধারণত, API কল বা ডেটা ফেচিংয়ের জন্য এটি ব্যবহৃত হয়।

componentDidMount() {

    fetch('https://api.example.com/data')

      .then(response => response.json())

      .then(data => this.setState({ data }));

  }

 

আনমাউন্টিং:

 componentWillMount

• এটি শেষবারের মতো কল হয়, যখন কম্পোনেন্ট DOM থেকে মুছে ফেলা হয়।
• ক্লিনআপ (যেমন, event listener সরানো) করার জন্য এটি ব্যবহৃত হয়।

componentWillUnmount() {

    clearInterval(this.timerID);

  }