রিঅ্যাক্ট শিডিউলার প্রোফাইলিং: অপ্টিমাইজড পারফরম্যান্সের জন্য টাস্ক এক্সিকিউশন উন্মোচন

আধুনিক ওয়েব ডেভেলপমেন্টের জগতে, একটি মসৃণ এবং প্রতিক্রিয়াশীল ব্যবহারকারীর অভিজ্ঞতা প্রদান করা সবচেয়ে গুরুত্বপূর্ণ। রিঅ্যাক্ট, তার কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার এবং ভার্চুয়াল DOM-এর সাহায্যে, জটিল ইউজার ইন্টারফেস (UI) তৈরির একটি ভিত্তি হয়ে উঠেছে। তবে, রিঅ্যাক্টের অপ্টিমাইজেশন থাকা সত্ত্বেও, বিশেষ করে বড় এবং জটিল অ্যাপ্লিকেশনগুলিতে পারফরম্যান্সের বাধা তৈরি হতে পারে। এই পারফরম্যান্স সমস্যাগুলি শনাক্ত এবং সমাধান করার জন্য রিঅ্যাক্ট কীভাবে টাস্ক শিডিউল এবং এক্সিকিউট করে তা বোঝা অত্যন্ত জরুরি। এই নিবন্ধটি রিঅ্যাক্ট শিডিউলার প্রোফাইলিং-এর জগতে প্রবেশ করে, টাস্ক এক্সিকিউশন বিশ্লেষণ এবং আপনার রিঅ্যাক্ট অ্যাপ্লিকেশনগুলিকে সর্বোচ্চ পারফরম্যান্সের জন্য অপ্টিমাইজ করার একটি বিস্তারিত নির্দেশিকা প্রদান করে।

রিঅ্যাক্ট শিডিউলার বোঝা

প্রোফাইলিং কৌশলগুলিতে যাওয়ার আগে, আসুন রিঅ্যাক্ট শিডিউলার সম্পর্কে একটি মৌলিক ধারণা স্থাপন করি। রিঅ্যাক্ট শিডিউলার একটি রিঅ্যাক্ট অ্যাপ্লিকেশনের মধ্যে কাজের এক্সিকিউশন পরিচালনা করার জন্য দায়ী। এটি টাস্কগুলিকে অগ্রাধিকার দেয়, সেগুলিকে ছোট ছোট কাজের ইউনিটে বিভক্ত করে এবং এমনভাবে সেগুলিকে এক্সিকিউট করার জন্য শিডিউল করে যাতে মূল থ্রেড ব্লক হওয়া সর্বনিম্ন হয়। একটি প্রতিক্রিয়াশীল ইউজার ইন্টারফেস বজায় রাখার জন্য এই শিডিউলিং অত্যন্ত গুরুত্বপূর্ণ।

রিঅ্যাক্ট একটি ফাইবার আর্কিটেকচার ব্যবহার করে, যা রেন্ডারিংকে ছোট, বাধা দেওয়া যায় এমন কাজের ইউনিটে বিভক্ত করতে দেয়। এই ইউনিটগুলিকে ফাইবার বলা হয়, এবং রিঅ্যাক্ট শিডিউলার এই ফাইবারগুলি পরিচালনা করে যাতে উচ্চ-অগ্রাধিকারের টাস্কগুলি (যেমন ব্যবহারকারীর ইনপুট) দ্রুত处理 করা হয়। শিডিউলার ফাইবারগুলি পরিচালনা করার জন্য একটি অগ্রাধিকার কিউ (priority queue) ব্যবহার করে, যা তাদের জরুরিতার উপর ভিত্তি করে আপডেটগুলিকে অগ্রাধিকার দিতে দেয়।

মূল ধারণা:

• ফাইবার (Fiber): একটি কম্পোনেন্ট ইনস্ট্যান্সকে প্রতিনিধিত্বকারী কাজের একক।
• শিডিউলার (Scheduler): ফাইবারগুলির অগ্রাধিকার নির্ধারণ এবং শিডিউল করার জন্য দায়ী মডিউল।
• ওয়ার্কলুপ (WorkLoop): ফাংশন যা ফাইবার ট্রি এর মধ্যে দিয়ে পুনরাবৃত্তি করে এবং আপডেট সম্পাদন করে।
• প্রায়োরিটি কিউ (Priority Queue): একটি ডেটা স্ট্রাকচার যা ফাইবারগুলিকে তাদের অগ্রাধিকারের ভিত্তিতে পরিচালনা করতে ব্যবহৃত হয়।

প্রোফাইলিং এর গুরুত্ব

প্রোফাইলিং হল আপনার অ্যাপ্লিকেশনের পারফরম্যান্স বৈশিষ্ট্যগুলি পরিমাপ এবং বিশ্লেষণ করার প্রক্রিয়া। রিঅ্যাক্টের প্রেক্ষাপটে, প্রোফাইলিং আপনাকে বুঝতে সাহায্য করে যে রিঅ্যাক্ট শিডিউলার কীভাবে টাস্ক এক্সিকিউট করছে, দীর্ঘ সময় ধরে চলা অপারেশনগুলি শনাক্ত করতে এবং সেইসব জায়গাগুলি চিহ্নিত করতে যেখানে অপ্টিমাইজেশনের সবচেয়ে বেশি প্রভাব পড়বে। প্রোফাইলিং ছাড়া, আপনি মূলত অন্ধকারে কাজ করছেন, পারফরম্যান্স উন্নত করার জন্য অনুমানের উপর নির্ভর করছেন।

এমন একটি পরিস্থিতি বিবেচনা করুন যেখানে আপনার অ্যাপ্লিকেশনটি লক্ষণীয়ভাবে ধীর হয়ে যায় যখন একজন ব্যবহারকারী একটি নির্দিষ্ট কম্পোনেন্টের সাথে ইন্টারঅ্যাক্ট করে। প্রোফাইলিং প্রকাশ করতে পারে যে এই ধীরগতির কারণটি সেই কম্পোনেন্টের মধ্যে একটি জটিল রেন্ডারিং অপারেশন, একটি অদক্ষ ডেটা ফেচিং প্রক্রিয়া, বা স্টেট আপডেটের কারণে অতিরিক্ত রি-রেন্ডার। মূল কারণটি শনাক্ত করে, আপনি আপনার অপ্টিমাইজেশনের প্রচেষ্টা সেই ক্ষেত্রগুলিতে মনোনিবেশ করতে পারেন যা সবচেয়ে উল্লেখযোগ্য পারফরম্যান্স লাভ দেবে।

রিঅ্যাক্ট শিডিউলার প্রোফাইলিং-এর জন্য টুলস

রিঅ্যাক্ট অ্যাপ্লিকেশন প্রোফাইল করার এবং রিঅ্যাক্ট শিডিউলারের মধ্যে টাস্ক এক্সিকিউশন সম্পর্কে অন্তর্দৃষ্টি অর্জনের জন্য বেশ কিছু শক্তিশালী টুল উপলব্ধ রয়েছে:

১. ক্রোম ডেভটুলস পারফরম্যান্স ট্যাব

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

কীভাবে ব্যবহার করবেন:

1. ক্রোম ডেভটুলস খুলুন (Ctrl+Shift+I বা Cmd+Option+I)।
2. "Performance" ট্যাবে যান।
3. "Record" বোতামে ক্লিক করুন।
4. আপনি যে আচরণটি প্রোফাইল করতে চান তা ট্রিগার করতে আপনার রিঅ্যাক্ট অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করুন।
5. রেকর্ডিং বন্ধ করতে "Stop" বোতামে ক্লিক করুন।
6. পারফরম্যান্সের বাধা শনাক্ত করতে তৈরি হওয়া টাইমলাইন বিশ্লেষণ করুন।

পারফরম্যান্স ট্যাব ক্যাপচার করা ডেটা বিশ্লেষণ করার জন্য বিভিন্ন ভিউ প্রদান করে, যার মধ্যে রয়েছে:

• ফ্লেম চার্ট (Flame Chart): জাভাস্ক্রিপ্ট ফাংশনগুলির কল স্ট্যাককে দৃশ্যমান করে, যা আপনাকে সেই ফাংশনগুলি শনাক্ত করতে দেয় যা সবচেয়ে বেশি সময় নেয়।
• বটম-আপ (Bottom-Up): প্রতিটি ফাংশন এবং তার কলিগুলিতে ব্যয় করা সময়কে একত্রিত করে, যা আপনাকে সবচেয়ে ব্যয়বহুল অপারেশনগুলি শনাক্ত করতে সাহায্য করে।
• কল ট্রি (Call Tree): কল স্ট্যাককে একটি হায়ারারকিক্যাল ফরম্যাটে প্রদর্শন করে, যা এক্সিকিউশন ফ্লো-এর একটি স্পষ্ট ভিউ প্রদান করে।

পারফরম্যান্স ট্যাবের মধ্যে, রিঅ্যাক্ট সম্পর্কিত এন্ট্রিগুলি সন্ধান করুন, যেমন "Update" (একটি কম্পোনেন্ট আপডেটকে প্রতিনিধিত্ব করে) বা "Commit" (আপডেট করা DOM-এর চূড়ান্ত রেন্ডারিংকে প্রতিনিধিত্ব করে)। এই এন্ট্রিগুলি কম্পোনেন্ট রেন্ডার করতে ব্যয় করা সময় সম্পর্কে মূল্যবান অন্তর্দৃষ্টি প্রদান করতে পারে।

২. রিঅ্যাক্ট ডেভটুলস প্রোফাইলার

রিঅ্যাক্ট ডেভটুলস প্রোফাইলার একটি বিশেষ টুল যা বিশেষভাবে রিঅ্যাক্ট অ্যাপ্লিকেশন প্রোফাইল করার জন্য তৈরি করা হয়েছে। এটি রিঅ্যাক্টের অভ্যন্তরীণ ক্রিয়াকলাপগুলির একটি আরও কেন্দ্রবিন্দু ভিউ প্রদান করে, যা কম্পোনেন্ট রেন্ডারিং, স্টেট আপডেট এবং প্রপ পরিবর্তন সম্পর্কিত পারফরম্যান্স সমস্যাগুলি শনাক্ত করা সহজ করে তোলে।

ইনস্টলেশন:

রিঅ্যাক্ট ডেভটুলস প্রোফাইলার ক্রোম, ফায়ারফক্স এবং এজ-এর জন্য একটি ব্রাউজার এক্সটেনশন হিসাবে উপলব্ধ। আপনি এটি সংশ্লিষ্ট ব্রাউজারের এক্সটেনশন স্টোর থেকে ইনস্টল করতে পারেন।

ব্যবহার:

1. আপনার ব্রাউজারে রিঅ্যাক্ট ডেভটুলস প্যানেল খুলুন।
2. "Profiler" ট্যাবে যান।
3. "Record" বোতামে ক্লিক করুন।
4. আপনি যে আচরণটি প্রোফাইল করতে চান তা ট্রিগার করতে আপনার রিঅ্যাক্ট অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করুন।
5. রেকর্ডিং বন্ধ করতে "Stop" বোতামে ক্লিক করুন।

প্রোফাইলার ক্যাপচার করা ডেটা বিশ্লেষণ করার জন্য দুটি প্রধান ভিউ প্রদান করে:

• ফ্লেমগ্রাফ (Flamegraph): কম্পোনেন্ট ট্রি-এর একটি ভিজ্যুয়াল উপস্থাপনা, যেখানে প্রতিটি বার একটি কম্পোনেন্টকে প্রতিনিধিত্ব করে এবং তার প্রস্থ সেই কম্পোনেন্টটি রেন্ডার করতে ব্যয় করা সময়কে প্রতিনিধিত্ব করে।
• র‍্যাঙ্কড (Ranked): কম্পোনেন্টগুলির একটি তালিকা যা তাদের রেন্ডার করতে নেওয়া সময়ের দ্বারা র‍্যাঙ্ক করা হয়েছে, যা আপনাকে দ্রুত সবচেয়ে ব্যয়বহুল কম্পোনেন্টগুলি শনাক্ত করতে দেয়।

রিঅ্যাক্ট ডেভটুলস প্রোফাইলার এছাড়াও নিম্নলিখিত বৈশিষ্ট্যগুলি প্রদান করে:

• আপডেট হাইলাইট করা: যে কম্পোনেন্টগুলি রি-রেন্ডার হচ্ছে সেগুলিকে দৃশ্যমানভাবে হাইলাইট করা, যা আপনাকে অপ্রয়োজনীয় রি-রেন্ডার শনাক্ত করতে সাহায্য করে।
• কম্পোনেন্ট প্রপস এবং স্টেট পরিদর্শন করা: কম্পোনেন্টগুলির প্রপস এবং স্টেট পরীক্ষা করে বোঝা যে কেন তারা রি-রেন্ডার হচ্ছে।
• কম্পোনেন্ট ফিল্টার করা: নির্দিষ্ট কম্পোনেন্ট বা কম্পোনেন্ট ট্রি-এর নির্দিষ্ট অংশে মনোযোগ কেন্দ্রীভূত করা।

৩. React.Profiler কম্পোনেন্ট

React.Profiler কম্পোনেন্ট একটি বিল্ট-ইন রিঅ্যাক্ট এপিআই যা আপনাকে আপনার অ্যাপ্লিকেশনের নির্দিষ্ট অংশগুলির রেন্ডারিং পারফরম্যান্স পরিমাপ করতে দেয়। এটি বাহ্যিক টুলের উপর নির্ভর না করে প্রোগ্রামাটিকভাবে প্রোফাইলিং ডেটা সংগ্রহ করার একটি উপায় প্রদান করে।

ব্যবহার:

আপনি যে কম্পোনেন্টগুলি প্রোফাইল করতে চান সেগুলিকে React.Profiler কম্পোনেন্ট দিয়ে র‍্যাপ করুন। প্রোফাইলারটিকে শনাক্ত করার জন্য একটি id প্রপ এবং একটি onRender প্রপ প্রদান করুন, যা একটি কলব্যাক ফাংশন যা প্রতিটি রেন্ডারের পরে কল করা হবে।

import React from 'react';

function MyComponent() {
  return (
    
      {/* Component content */}
    
  );
}

function onRenderCallback(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number,
  interactions: Set
) {
  console.log(`Component ${id} rendered`);
  console.log(`Phase: ${phase}`);
  console.log(`Actual duration: ${actualDuration}ms`);
  console.log(`Base duration: ${baseDuration}ms`);
}

onRender কলব্যাক ফাংশনটি বেশ কিছু আর্গুমেন্ট গ্রহণ করে যা রেন্ডারিং প্রক্রিয়া সম্পর্কে তথ্য প্রদান করে:

• id: React.Profiler কম্পোনেন্টের id প্রপ।
• phase: নির্দেশ করে যে কম্পোনেন্টটি সবে মাউন্ট হয়েছে নাকি আপডেট হয়েছে।
• actualDuration: এই আপডেটে কম্পোনেন্টটি রেন্ডার করতে ব্যয় করা সময়।
• baseDuration: মেমোইজেশন ছাড়া কম্পোনেন্ট ট্রি রেন্ডার করার আনুমানিক সময়।
• startTime: যখন রিঅ্যাক্ট এই আপডেটটি রেন্ডার করা শুরু করেছিল।
• commitTime: যখন রিঅ্যাক্ট এই আপডেটটি কমিট করেছিল।
• interactions: যখন এই আপডেটটি শিডিউল করা হয়েছিল তখন যে "ইন্টারঅ্যাকশন" গুলি ট্রেস করা হচ্ছিল তার সেট।

আপনি এই ডেটা ব্যবহার করে আপনার কম্পোনেন্টগুলির রেন্ডারিং পারফরম্যান্স ট্র্যাক করতে এবং অপ্টিমাইজেশনের প্রয়োজন এমন ক্ষেত্রগুলি শনাক্ত করতে পারেন।

প্রোফাইলিং ডেটা বিশ্লেষণ

একবার আপনি উপরে উল্লিখিত টুলগুলির একটি ব্যবহার করে প্রোফাইলিং ডেটা ক্যাপচার করার পরে, পরবর্তী পদক্ষেপ হল ডেটা বিশ্লেষণ করা এবং পারফরম্যান্সের বাধা শনাক্ত করা। এখানে কিছু মূল ক্ষেত্র রয়েছে যার উপর মনোযোগ দিতে হবে:

১. ধীর রেন্ডারিং কম্পোনেন্ট শনাক্ত করা

রিঅ্যাক্ট ডেভটুলস প্রোফাইলারের ফ্লেমগ্রাফ এবং র‍্যাঙ্কড ভিউগুলি সেই কম্পোনেন্টগুলি শনাক্ত করার জন্য বিশেষভাবে উপযোগী যা রেন্ডার করতে দীর্ঘ সময় নেয়। ফ্লেমগ্রাফে চওড়া বারযুক্ত কম্পোনেন্টগুলি বা র‍্যাঙ্কড তালিকার শীর্ষে উপস্থিত কম্পোনেন্টগুলি সন্ধান করুন। এই কম্পোনেন্টগুলি অপ্টিমাইজেশনের সম্ভাব্য প্রার্থী।

ক্রোম ডেভটুলস পারফরম্যান্স ট্যাবে, "Update" এন্ট্রিগুলি সন্ধান করুন যা একটি উল্লেখযোগ্য পরিমাণ সময় নেয়। এই এন্ট্রিগুলি কম্পোনেন্ট আপডেটকে প্রতিনিধিত্ব করে, এবং এই এন্ট্রিগুলির মধ্যে ব্যয় করা সময় সংশ্লিষ্ট কম্পোনেন্টগুলির রেন্ডারিং খরচ নির্দেশ করে।

২. অপ্রয়োজনীয় রি-রেন্ডার চিহ্নিত করা

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

রিঅ্যাক্ট ডেভটুলস সেটিংসে "Highlight updates when components render" বিকল্পটি সক্ষম করুন। এটি যে কম্পোনেন্টগুলি রি-রেন্ডার হচ্ছে সেগুলিকে দৃশ্যমানভাবে হাইলাইট করবে, যা অপ্রয়োজনীয় রি-রেন্ডারগুলি খুঁজে পাওয়া সহজ করে তুলবে। এই কম্পোনেন্টগুলি কেন রি-রেন্ডার হচ্ছে তার কারণগুলি তদন্ত করুন এবং সেগুলি প্রতিরোধ করার জন্য কৌশলগুলি প্রয়োগ করুন, যেমন React.memo বা useMemo ব্যবহার করা।

৩. ব্যয়বহুল গণনা পরীক্ষা করা

আপনার কম্পোনেন্টগুলির মধ্যে দীর্ঘ সময় ধরে চলা গণনাগুলি মূল থ্রেডকে ব্লক করতে পারে এবং পারফরম্যান্স সমস্যা সৃষ্টি করতে পারে। ক্রোম ডেভটুলস পারফরম্যান্স ট্যাব এই গণনাগুলি শনাক্ত করার জন্য একটি মূল্যবান টুল।

ফ্লেম চার্ট বা বটম-আপ ভিউতে উল্লেখযোগ্য পরিমাণ সময় নেওয়া জাভাস্ক্রিপ্ট ফাংশনগুলি সন্ধান করুন। এই ফাংশনগুলি জটিল গণনা, ডেটা রূপান্তর, বা অন্যান্য ব্যয়বহুল অপারেশন করতে পারে। মেমোইজেশন, ক্যাশিং বা আরও দক্ষ অ্যালগরিদম ব্যবহার করে এই ফাংশনগুলি অপ্টিমাইজ করার কথা বিবেচনা করুন।

৪. নেটওয়ার্ক অনুরোধ বিশ্লেষণ

নেটওয়ার্ক অনুরোধগুলিও পারফরম্যান্সের বাধা সৃষ্টি করতে পারে, বিশেষ করে যদি সেগুলি ধীর বা ঘন ঘন হয়। ক্রোম ডেভটুলস নেটওয়ার্ক ট্যাব আপনার অ্যাপ্লিকেশনের নেটওয়ার্ক কার্যকলাপ সম্পর্কে অন্তর্দৃষ্টি প্রদান করে।

সম্পূর্ণ হতে দীর্ঘ সময় নেওয়া অনুরোধ বা বারবার করা অনুরোধগুলি সন্ধান করুন। ক্যাশিং, পেজিনেশন বা আরও দক্ষ ডেটা ফেচিং কৌশল ব্যবহার করে এই অনুরোধগুলি অপ্টিমাইজ করার কথা বিবেচনা করুন।

৫. শিডিউলার ইন্টারঅ্যাকশন বোঝা

রিঅ্যাক্ট শিডিউলার কীভাবে টাস্কগুলিকে অগ্রাধিকার দেয় এবং এক্সিকিউট করে সে সম্পর্কে গভীরতর ধারণা অর্জন করা পারফরম্যান্স অপ্টিমাইজ করার জন্য অমূল্য হতে পারে। যদিও ক্রোম ডেভটুলস পারফরম্যান্স ট্যাব এবং রিঅ্যাক্ট ডেভটুলস প্রোফাইলার শিডিউলারের ক্রিয়াকলাপ সম্পর্কে কিছু দৃশ্যমানতা প্রদান করে, ক্যাপচার করা ডেটা বিশ্লেষণ করার জন্য রিঅ্যাক্টের অভ্যন্তরীণ কার্যকারিতা সম্পর্কে আরও সূক্ষ্ম বোঝার প্রয়োজন।

কম্পোনেন্ট এবং শিডিউলারের মধ্যে ইন্টারঅ্যাকশনের উপর মনোযোগ দিন। যদি নির্দিষ্ট কিছু কম্পোনেন্ট ধারাবাহিকভাবে উচ্চ-অগ্রাধিকারের আপডেট ট্রিগার করে, তবে বিশ্লেষণ করুন কেন এই আপডেটগুলি প্রয়োজনীয় এবং সেগুলি স্থগিত বা অপ্টিমাইজ করা যায় কিনা। শিডিউলার কীভাবে বিভিন্ন ধরণের টাস্ক, যেমন রেন্ডারিং, লেআউট এবং পেইন্টিং, ইন্টারলিভ করে সেদিকে মনোযোগ দিন। যদি শিডিউলার ক্রমাগত টাস্কগুলির মধ্যে স্যুইচ করে, তবে এটি নির্দেশ করতে পারে যে অ্যাপ্লিকেশনটি থ্র্যাশিং অনুভব করছে, যা পারফরম্যান্সের অবনতি ঘটাতে পারে।

অপ্টিমাইজেশন কৌশল

একবার আপনি প্রোফাইলিংয়ের মাধ্যমে পারফরম্যান্সের বাধা শনাক্ত করার পরে, পরবর্তী পদক্ষেপ হল আপনার অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করার জন্য অপ্টিমাইজেশন কৌশলগুলি প্রয়োগ করা। এখানে কিছু সাধারণ অপ্টিমাইজেশন কৌশল রয়েছে:

১. মেমোইজেশন (Memoization)

মেমোইজেশন হল ব্যয়বহুল ফাংশন কলের ফলাফল ক্যাশ করার এবং একই ইনপুট আবার ঘটলে ক্যাশ করা ফলাফলটি ফেরত দেওয়ার একটি কৌশল। রিঅ্যাক্টে, আপনি ফাংশনাল কম্পোনেন্টগুলি মেমোইজ করার জন্য React.memo এবং গণনার ফলাফল মেমোইজ করার জন্য useMemo হুক ব্যবহার করতে পারেন।

import React, { useMemo } from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // ... component logic
});

function MyComponentWithMemoizedValue() {
  const expensiveValue = useMemo(() => {
    // ... expensive computation
    return result;
  }, [dependencies]);

  return (
    

      {expensiveValue}
    
  );
}

২. ভার্চুয়ালাইজেশন (Virtualization)

ভার্চুয়ালাইজেশন হল বড় তালিকা বা টেবিলগুলিকে দক্ষতার সাথে রেন্ডার করার একটি কৌশল, শুধুমাত্র দৃশ্যমান আইটেমগুলি রেন্ডার করে। react-window এবং react-virtualized-এর মতো লাইব্রেরিগুলি রিঅ্যাক্ট অ্যাপ্লিকেশনগুলিতে তালিকা এবং টেবিল ভার্চুয়ালাইজ করার জন্য কম্পোনেন্ট সরবরাহ করে।

৩. কোড স্প্লিটিং (Code Splitting)

কোড স্প্লিটিং হল আপনার অ্যাপ্লিকেশনটিকে ছোট ছোট খণ্ডে বিভক্ত করা এবং চাহিদা অনুযায়ী সেগুলি লোড করার একটি কৌশল। এটি আপনার অ্যাপ্লিকেশনের প্রাথমিক লোড সময় কমাতে এবং এর সামগ্রিক পারফরম্যান্স উন্নত করতে পারে। রিঅ্যাক্ট ডায়নামিক ইম্পোর্ট এবং React.lazy এবং Suspense কম্পোনেন্ট ব্যবহার করে কোড স্প্লিটিং সমর্থন করে।

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...