React অ্যাপ্লিকেশনগুলো কম্পোনেন্ট দিয়ে তৈরি, এবং প্রতিটি কম্পোনেন্টের একটি জীবনচক্র রয়েছে। এটি স্ক্রিনে প্রদর্শিত হয়। এটি নতুন তথ্যের প্রতি প্রতিক্রিয়া জানায়। অবশেষে এটি অদৃশ্য হয়ে যায়। এই ছন্দকে অবহেলা করলে তার মাসুল দিতে হবে। মেমরি লিক (Memory leaks) হতে শুরু করে। রেন্ডার পারফরম্যান্স কমে যায়। ব্যবহারকারীরা এমন বোতামে ক্লিক করেন যা আর কাজ করে না, কারণ সেটির সাথে যুক্ত কম্পোনেন্টটি দশ মিনিট আগেই আনমাউন্ট (unmount) হয়ে গেছে কিন্তু ইভেন্ট লিসেনার (event listener) এখনও সক্রিয় রয়েছে। কম্পোনেন্ট লাইফসাইকেল বোঝা কোনো তাত্ত্বিক বিষয় নয়। এটি এমন সফটওয়্যার লেখার ভিত্তি যা বাস্তব ব্যবহারের ক্ষেত্রে নির্ভরযোগ্য থাকে।

একটি কম্পোনেন্টের অস্তিত্বকে তিনটি পর্যায়ে চিন্তা করুন। ডেভেলপাররা প্রায়ই এগুলোকে জন্ম, বৃদ্ধি এবং মৃত্যু হিসেবে বর্ণনা করেন। React এগুলোকে mounting, updating এবং unmounting বলে। প্রতিটি পর্যায়ের একটি নির্দিষ্ট কাজ রয়েছে এবং প্রতিটি আপনাকে কোড চালানোর বা পরিষ্কার (clean up) করার একটি সুনির্দিষ্ট মুহূর্ত দেয়।

তিনটি পর্যায়

Mounting হলো জন্ম। কম্পোনেন্টটি তৈরি হয় এবং প্রথমবারের মতো ব্রাউজার DOM-এ যুক্ত হয়। এটি আপনার সেটআপ করার সময়। যদি কম্পোনেন্টের রিমোট ডেটা প্রয়োজন হয়, তবে এটিই সেই সময় যখন আপনি তা রিকোয়েস্ট করবেন। যদি props থেকে গণনা করা কোনো প্রাথমিক স্টেট (initial state) প্রয়োজন হয়, তবে আপনি তা এখানেই করবেন। ক্লাস কম্পোনেন্টের যুগে, এটি ছিল componentDidMount-এর কাজ। আধুনিক ফাংশনাল কম্পোনেন্টের ক্ষেত্রে, আপনি এটি useEffect এবং একটি খালি ডিপেন্ডেন্সি অ্যারে (empty dependency array) দিয়ে পরিচালনা করেন। মূল বিষয়টি হলো এই কোড ব্লকটি একবারই চলে, ঠিক যখন React এলিমেন্টটিকে পেজে স্থাপন করে। এটি ইউজার প্রোফাইল ফেচ করা বা localStorage থেকে কোনো ভ্যালু পড়ার মতো ওয়ান-টাইম সেটআপের জন্য আদর্শ।

Updating হলো বৃদ্ধি। একটি মাউন্ট করা কম্পোনেন্ট স্থির থাকে না। প্যারেন্ট থেকে props আসে। ইউজার ইন্টারঅ্যাকশনের ফলে স্টেট পরিবর্তিত হয়। প্যারেন্ট নিজেই রেন্ডার হয়, যা চাইল্ড কম্পোনেন্টকেও রেন্ডার হতে বাধ্য করে। এরপর React কম্পোনেন্টটিকে পুনরায় রেন্ডার করে যাতে UI আপনার ডেটার সাথে সিঙ্ক (sync) থাকে। এই পর্যায়টি একটি কম্পোনেন্টের জীবনচক্রে অনেকবার পুনরাবৃত্তি হয়। প্রতিবার যখন কোনো ডিপেন্ডেন্সি পরিবর্তিত হয়, আপনার ইফেক্টগুলো আবার চলে এবং কম্পোনেন্টটি DOM-এ নতুন আউটপুট প্রদান করে। যেহেতু এই পর্যায়টি খুব ঘনঘন ট্রিগার হয়, তাই এখানেই বেশিরভাগ পারফরম্যান্স সমস্যা শুরু হয়। এখানে অপ্রয়োজনীয় কাজ দ্রুত সমস্যা বাড়িয়ে তোলে।

Unmounting হলো মৃত্যু। কম্পোনেন্টটি স্ক্রিন থেকে চলে যায়, হয়তো ব্যবহারকারী অন্য কোনো পেজে চলে গেছেন অথবা কোনো কন্ডিশনাল রেন্ডার বন্ধ হয়ে গেছে। এই পর্যায়ে কম্পোনেন্টটি ধ্বংস হয়ে যায়, কিন্তু বাইরের জগত সবসময় তা জানতে পারে না। টাইমারগুলো চলতে থাকে। WebSockets শুনতে থাকে। window অবজেক্টের ইভেন্ট লিসেনারগুলো যুক্ত থেকে যায়। আপনি যদি এগুলো পরিষ্কার না করেন, তবে সেগুলো মৃত কম্পোনেন্টের রেফারেন্স ধরে রাখে এবং মেমরি লিক করে। ব্রাউজার অহেতুক এই 'ভূত' বা মৃত অবজেক্টগুলোর পেছনে সময় নষ্ট করে। React আপনাকে একটি ক্লিনআপ ফাংশন (cleanup function) দেয় যাতে কম্পোনেন্টটি চিরতরে অদৃশ্য হওয়ার আগে আপনি ইন্টারভাল বন্ধ করতে পারেন, কানেকশন ক্লোজ করতে পারেন এবং লিসেনারগুলো সরিয়ে ফেলতে পারেন।

ক্লাস মেথড থেকে হুকস (Hooks)-এ

বছরের পর বছর ধরে, React ইঞ্জিনিয়াররা ক্লাস কম্পোনেন্টের মাধ্যমে এই পর্যায়গুলো পরিচালনা করতেন। লজিকগুলো আলাদা আলাদা মেথডে বিভক্ত ছিল। আপনি componentDidMount-এর ভেতরে ডেটা ফেচ করতেন, componentDidUpdate-এর ভেতরে prop পরিবর্তনের প্রতিক্রিয়া দেখাতেন এবং componentWillUnmount-এর ভেতরে সব পরিষ্কার করতেন। সমস্যা ছিল যে সম্পর্কিত লজিকগুলো ছড়িয়ে ছিটিয়ে যেত। একটি একক ফিচার, যেমন একটি লাইভ চ্যাট কানেকশন, কানেক্ট করা, থ্রেড পরিবর্তন চেক করা এবং ডিসকানেক্ট করার জন্য তিনটি আলাদা লাইফসাইকেল মেথডে কোড লিখতে হতো।

Hooks এটি বদলে দিয়েছে। ফাংশনাল কম্পোনেন্টে useEffect হুক আপনাকে লাইফসাইকেল পর্যায়ের পরিবর্তে উদ্দেশ্যের ভিত্তিতে লজিক গ্রুপ করতে সাহায্য করে। তবুও, আপনি যদি জানেন কোথায় খুঁজতে হবে, তবে মেন্টাল মডেলটি খুব সহজেই মিলে যায়।

মাউন্টিং হ্যান্ডেল করতে লিখুন useEffect(() => { ... }, [])। খালি ডিপেন্ডেন্সি অ্যারে React-কে জানায় যে এই ইফেক্টের কোনো বাহ্যিক ডিপেন্ডেন্সি নেই, তাই এটি শুধুমাত্র প্রাথমিক রেন্ডারের পরে চলে। এটি componentDidMount-এর বিকল্প হিসেবে কাজ করে।

আপডেট হ্যান্ডেল করতে, সেই নির্দিষ্ট ভ্যালুগুলো অন্তর্ভুক্ত করুন যা React-এর নজর রাখা উচিত: useEffect(() => { ... }, [dependency])। রেন্ডারের মাঝে যখন dependency পরিবর্তিত হয়,