Explain Lifecycle Methods of React Functional Components

React lifecycle methods নিয়ে অনেকেই শুরুতে দ্বিধায় পড়ে যায়। কোন সময় কোন মেথড চলে, কেন চলে, আর কিভাবে সেগুলো আমাদের কোডকে আরও সুন্দর আর কার্যকরী করতে সাহায্য করে; সবই সহজভাবে বোঝা দরকার।

এই ব্লগে আমরা সহজ ভাষায় শিখব React functional component এর lifecycle কীভাবে কাজ করে। কীভাবে useEffect দিয়ে traditional lifecycle method গুলো (যেমন componentDidMount, componentDidUpdate, componentWillUnmount) এর কাজ করা যায় সেটাই থাকছে আমাদের আলোচনায়।

What is the lifecycle of a React component?React component-এর জীবন আসলে অনেকটা মানুষের জীবনের মতোই। একটা component যখন তৈরি হয়, তখন সেটা DOM এ বসে প্রথম নিঃশ্বাস নেয়, এটা হলো জন্ম। এরপর সময়ের সাথে সাথে সেটার ভেতরে state বা props পরিবর্তন হয়, সেটার আচরণও বদলায়, এটা হলো বেড়ে ওঠা বা পরিবর্তনের সময়। আর এক সময় যখন সেই কম্পোনেন্টের আর দরকার থাকে না, তখন সেটা DOM থেকে মুছে যায় এবং  ঠিক তখনই শেষ হয় তার জীবনচক্র। React এই পুরো প্রক্রিয়াকে বলে lifecycle। আর এই lifecycle-এর প্রতিটি ধাপ তুমি useEffect বা অন্যান্য React hook দিয়ে সুন্দরভাবে নিয়ন্ত্রণ

করতে পারো, যেন component ঠিক সময়ে ঠিক কাজগুলো করে। এই নিয়মগুলো জানলে তুমি component এর জন্ম থেকে শেষ পর্যন্ত পুরোটা নিজের নিয়ন্ত্রণে রাখতে পারবে।

Phase	What happens	Example method / hook
Mounting	Component তৈরি হচ্ছে	componentDidMount, useEffect
Updating	State বা props পরিবর্তন হচ্ছে	componentDidUpdate, useEffect
Unmounting	Component DOM থেকে মুছে যাচ্ছে	componentWillUnmount, useEffect cleanup

useEffect দিয়ে lifecycle phases হ্যান্ডল করা

Mounting phase

যখন কম্পোনেন্ট DOM এ বসে তখন useEffect dependency array খালি থাকলে একবার চলে।

Code example:

useEffect(() => {
  console.log("Component mounted");
}, []);

➡ এটি componentDidMount এর মতো কাজ করে।

Updating phase

যখন dependency array এর কোনো মান পরিবর্তন হয় তখন effect চলে।

Code example:

useEffect(() => {
  console.log("userId updated");
}, [userId]);

➡ এটি componentDidUpdate এর মতো behave করে। dependency array সঠিকভাবে লিখা খুব গুরুত্বপূর্ণ।

Unmounting phase

useEffect return করলে সেটি component unmount হওয়ার সময় চলে।

Code example:

useEffect(() => {
  const timer = setInterval(() => console.log("Running..."), 1000);
  return () => {
    console.log("Cleanup on unmount");
    clearInterval(timer);
  };
}, []);

➡ এটি componentWillUnmount এর মতো কাজ করে।

React functional component এ তুমি যখন useEffect হুক ব্যবহার করো, তখন আসলে component-এর পুরো lifecycle তোমার হাতের মুঠোয় থাকে। কম্পোনেন্ট কখন তৈরি হচ্ছে, কখন আপডেট হচ্ছে, আর কখন সেটার দরজা বন্ধ করে DOM থেকে বিদায় নিতে হচ্ছে, এই প্রতিটা ধাপ তুমি খুব সহজেই useEffect দিয়ে নিয়ন্ত্রণ করতে পারো।

যদি dependency array ঠিকভাবে লিখো, আর যেখানে যেখানে দরকার সেখানে cleanup function দাও, তাহলে তোমার component হবে পরিপাটি আর বাগ ফ্রি। এতে unnecessary রিরেন্ডার এড়ানো যাবে, কম্পোনেন্টের ভিতরের resource leak হবে না, আর overall performance অনেক ভালো হবে।

আমাদের রিয়্যাক্ট এপ্লিকেশনে  useEffect হচ্ছে তোমার কম্পোনেন্টের জন্য একধরনের চাবি। এই চাবি দিয়ে তুমি ঠিক সময়ে ঠিক কাজ করাতে পারো। আর সেই কারণেই useEffect কে বুঝে শুনে, dependency ঠিক রেখে, প্রয়োজনমতো cleanup লিখে ব্যবহার করা জরুরি। তাহলে তোমার রিয়্যাক্ট এপ্লিকেশন হবে ফাস্ট, ক্লিন আর মেইনটেইন করতে সহজ।

Technology এর সকল আপডেট সবার আগে বিস্তারিত পেতে চেক করুন