React যখন Re-render বলে, এর মানে তিনটি বিষয়
যখন আপনি setState কল করেন, React শুধু DOM আপডেট করে না। এটি একটি ক্রমানুসারে তিনটি আলাদা ফেজ (phase) চালায়। বেশিরভাগ ডেভেলপার এই ফেজগুলো নিয়ে বিভ্রান্ত হন। এদের পার্থক্য বুঝতে পারলে পারফরম্যান্সের সমস্যা সমাধান করতে সুবিধা হয়।
তিনটি ফেজ:
• Render: React আপনার কম্পোনেন্ট ফাংশনটি কল করে। • Reconcile: React নতুন আউটপুটকে পুরনো আউটপুটের সাথে তুলনা করে। • Commit: React DOM-এ পরিবর্তনগুলো প্রয়োগ করে।
১. Render ফেজ
React আপনার ফাংশনটি চালায়। এটি বর্তমান props ব্যবহার করে। ফাংশনটি JSX রিটার্ন করে। এই JSX হলো মূলত JavaScript অবজেক্টের একটি তালিকা। মানুষ একে virtual DOM বলে। এটি কোনো আসল DOM নয়। এটি UI দেখতে কেমন হবে তার একটি বর্ণনা মাত্র। স্ক্রিনে এখনও কিছুই দেখা যায় না। এই ফেজটি সম্পূর্ণ গাণিতিক এবং লজিক্যাল।
২. Reconcile ফেজ
React পুরনো ট্রি (tree) এবং নতুন ট্রি উভয়ই ধরে রাখে। এটি তাদের মধ্যে পার্থক্য খোঁজে। যদি কোনো এলিমেন্টের টাইপ পরিবর্তিত হয়, React পুরো ট্রিটি বদলে ফেলে। যদি শুধু props পরিবর্তিত হয়, React সেগুলো আপডেট করে। এখানেই keys-এর গুরুত্ব প্রকাশ পায়। Keys React-কে একটি লিস্টের আইটেমগুলোকে পজিশনের পরিবর্তে আইডেন্টিটি (identity) দিয়ে মেলানোয় সাহায্য করে। এই ফেজটি DOM আপডেট করার জন্য প্রয়োজনীয় সর্বনিম্ন পদক্ষেপের একটি তালিকা তৈরি করে।
৩. Commit ফেজ
React পরিবর্তনের তালিকাটি নেয় এবং আসল DOM-এ কাজ করে। এটি নতুন নোড তৈরি করে এবং পুরনোগুলো সরিয়ে ফেলে। এই সময়েই ব্যবহারকারীরা স্ক্রিনে পরিবর্তন দেখতে পান। এর পরে, ব্রাউজার স্ক্রিনটি পেইন্ট (paint) করে। তারপর, useEffect চলে।
সাধারণ ভুল ধারণা:
• একটি re-render সবসময় DOM পরিবর্তন করে না। যদি আউটপুট একই থাকে, তবে React commit ফেজে কিছুই করে না। • React.memo ফাংশন কল স্কিপ করে। এটি DOM আপডেট স্কিপ করে না। • Props re-render ট্রিগার করে না। একটি প্যারেন্ট (parent) re-render হলে তা চাইল্ডকে (child) ট্রিগার করে। Prop পরিবর্তন হলো কেবল একটি ফলাফল।
পারফরম্যান্স কীভাবে ঠিক করবেন:
যদি আপনার ফাংশন ধীরগতির হয়, তবে আপনার Render সমস্যা আছে। ফাংশনের বাইরে ভারী কাজগুলো সরিয়ে ফেলুন অথবা memoization ব্যবহার করুন।
যদি React বিশাল লিস্ট পুনরায় তৈরি করে, তবে আপনার Reconcile সমস্যা আছে। আপনার keys গুলো পরীক্ষা করুন।
যদি DOM অতিরিক্ত আপডেট হয়, তবে আপনার Commit সমস্যা আছে। virtualization ব্যবহার করুন অথবা আপনার স্ট্রাকচার পরিবর্তন করুন।
React 19 এবং React Compiler এখন এই কাজের অনেকটা আপনার হয়ে সামলে নেয়। তবে এই ফেজগুলো জানা থাকলে আপনাকে ডিবাগ (debug) করতে আরও সাহায্য করবে।