সর্বোচ্চ পারফরম্যান্স আনলক করা: React Profiler API-এর একটি গভীর পর্যালোচনা

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

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

React Profiler API কী?

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

এটি কিছু গুরুত্বপূর্ণ প্রশ্নের উত্তর দেয়, যেমন:

• একটি নির্দিষ্ট কম্পোনেন্ট রেন্ডার হতে কত সময় নেয়?
• ব্যবহারকারীর একটি ইন্টারঅ্যাকশনের সময় একটি কম্পোনেন্ট কতবার রি-রেন্ডার হয়?
• একটি নির্দিষ্ট কম্পোনেন্ট কেন রি-রেন্ডার হলো?

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

প্রোফাইলার প্রধানত দুটি রূপে উপলব্ধ:

1. The React DevTools Extension: একটি ব্যবহারকারী-বান্ধব, গ্রাফিকাল ইন্টারফেস যা সরাসরি আপনার ব্রাউজারের ডেভেলপার টুলসে একত্রিত। প্রোফাইলিং শুরু করার জন্য এটি সবচেয়ে সাধারণ উপায়।
2. The Programmatic `` Component: একটি কম্পোনেন্ট যা আপনি সরাসরি আপনার JSX কোডে যোগ করতে পারেন প্রোগ্রাম্যাটিকভাবে পারফরম্যান্স পরিমাপ সংগ্রহ করার জন্য, যা স্বয়ংক্রিয় টেস্টিং বা অ্যানালিটিক্স সার্ভিসে মেট্রিক্স পাঠানোর জন্য উপযোগী।

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

শুরু করা: React Profiler কীভাবে ব্যবহার করবেন

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

পদ্ধতি ১: React DevTools প্রোফাইলার ট্যাব

বেশিরভাগ দৈনন্দিন পারফরম্যান্স ডিবাগিংয়ের জন্য, React DevTools-এর প্রোফাইলার ট্যাবটি আপনার প্রধান হাতিয়ার। যদি এটি আপনার ইনস্টল করা না থাকে, তবে এটিই প্রথম ধাপ—আপনার পছন্দের ব্রাউজারের (Chrome, Firefox, Edge) জন্য এক্সটেনশনটি নিন।

আপনার প্রথম প্রোফাইলিং সেশন চালানোর জন্য এখানে একটি ধাপে ধাপে নির্দেশিকা রয়েছে:

1. আপনার অ্যাপ্লিকেশন খুলুন: ডেভেলপমেন্ট মোডে চলমান আপনার React অ্যাপ্লিকেশনে যান। যদি আপনি আপনার ব্রাউজারের এক্সটেনশন বারে React আইকনটি দেখেন, তাহলে বুঝবেন DevTools সক্রিয় আছে।
2. ডেভেলপার টুলস খুলুন: আপনার ব্রাউজারের ডেভেলপার টুলস খুলুন (সাধারণত F12 বা Ctrl+Shift+I / Cmd+Option+I দিয়ে) এবং "Profiler" ট্যাবটি খুঁজুন। যদি আপনার অনেকগুলো ট্যাব থাকে, তবে এটি "»" চিহ্নের আড়ালে লুকানো থাকতে পারে।
3. প্রোফাইলিং শুরু করুন: আপনি প্রোফাইলার UI-তে একটি নীল বৃত্ত (রেকর্ড বোতাম) দেখতে পাবেন। পারফরম্যান্স ডেটা রেকর্ডিং শুরু করতে এটিতে ক্লিক করুন।
4. আপনার অ্যাপের সাথে ইন্টারঅ্যাক্ট করুন: আপনি যে ক্রিয়াটি পরিমাপ করতে চান তা সম্পাদন করুন। এটি একটি পেজ লোড করা, একটি মোডাল খোলার জন্য একটি বোতামে ক্লিক করা, একটি ফর্মে টাইপ করা, বা একটি বড় তালিকা ফিল্টার করার মতো যেকোনো কিছু হতে পারে। লক্ষ্য হলো সেই ব্যবহারকারীর ইন্টারঅ্যাকশনটি পুনরায় তৈরি করা যা ধীর মনে হচ্ছে।
5. প্রোফাইলিং বন্ধ করুন: একবার আপনি ইন্টারঅ্যাকশনটি সম্পন্ন করলে, সেশনটি বন্ধ করতে রেকর্ড বোতামটি আবার ক্লিক করুন (এটি এখন লাল হবে)।

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

পদ্ধতি ২: প্রোগ্রাম্যাটিক `Profiler` কম্পোনেন্ট

যদিও DevTools ইন্টারেক্টিভ ডিবাগিংয়ের জন্য দুর্দান্ত, কখনও কখনও আপনাকে স্বয়ংক্রিয়ভাবে পারফরম্যান্স ডেটা সংগ্রহ করতে হয়। `` কম্পোনেন্ট, যা `react` প্যাকেজ থেকে এক্সপোর্ট করা হয়, আপনাকে ঠিক তাই করতে দেয়।

আপনি আপনার কম্পোনেন্ট ট্রির যেকোনো অংশকে `` কম্পোনেন্ট দিয়ে মুড়ে দিতে পারেন। এর জন্য দুটি প্রপস প্রয়োজন:

• `id` (string): আপনি যে ট্রি-এর অংশটি প্রোফাইল করছেন তার জন্য একটি অনন্য শনাক্তকারী। এটি আপনাকে বিভিন্ন প্রোফাইলার থেকে পরিমাপ আলাদা করতে সাহায্য করে।
• `onRender` (function): একটি কলব্যাক ফাংশন যা React প্রতিবার প্রোফাইল করা ট্রির মধ্যে একটি কম্পোনেন্ট একটি আপডেট "কমিট" করলে কল করে।

এখানে একটি কোড উদাহরণ দেওয়া হলো:

import React, { Profiler } from 'react';

// onRender কলব্যাক
function onRenderCallback(
  id, // Profiler ট্রি-এর "id" প্রপ, যেটি এইমাত্র কমিট হয়েছে
  phase, // "mount" (যদি ট্রি প্রথমবার মাউন্ট হয়) অথবা "update" (যদি এটি পুনরায় রেন্ডার হয়)
  actualDuration, // কমিট করা আপডেটটি রেন্ডার করতে যে সময় লেগেছে
  baseDuration, // মেমোাইজেশন ছাড়া পুরো সাবট্রি রেন্ডার করার আনুমানিক সময়
  startTime, // যখন React এই আপডেটটি রেন্ডার করা শুরু করেছিল
  commitTime, // যখন React এই আপডেটটি কমিট করেছিল
  interactions // ইন্টারঅ্যাকশনের একটি সেট যা আপডেটটি ট্রিগার করেছে
) {
  // আপনি এই ডেটা লগ করতে পারেন, এটি একটি অ্যানালিটিক্স এন্ডপয়েন্টে পাঠাতে পারেন, বা একত্রিত করতে পারেন।
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    

      
        
      
      

        
          
        
      
    
  );
}

`onRender` কলব্যাকের প্যারামিটারগুলো বোঝা:

• `id`: আপনি `` কম্পোনেন্টে যে স্ট্রিং `id` পাস করেছেন।
• `phase`: হয় `"mount"` (কম্পোনেন্টটি প্রথমবারের জন্য মাউন্ট হয়েছে) অথবা `"update"` (এটি প্রপস, স্টেট বা হুকের পরিবর্তনের কারণে পুনরায় রেন্ডার হয়েছে)।
• `actualDuration`: এই নির্দিষ্ট আপডেটের জন্য `` এবং এর ডিসেন্ড্যান্ট রেন্ডার করতে মিলিসেকেন্ডে যে সময় লেগেছে। ধীর রেন্ডার শনাক্ত করার জন্য এটি আপনার মূল মেট্রিক।
• `baseDuration`: স্ক্র্যাচ থেকে পুরো সাবট্রি রেন্ডার করতে কত সময় লাগবে তার একটি অনুমান। এটি "সবচেয়ে খারাপ" পরিস্থিতি এবং একটি কম্পোনেন্ট ট্রির সামগ্রিক জটিলতা বোঝার জন্য কার্যকর। যদি `actualDuration` `baseDuration`-এর থেকে অনেক কম হয়, তবে এটি ইঙ্গিত দেয় যে মেমোাইজেশনের মতো অপটিমাইজেশন কার্যকরভাবে কাজ করছে।
• `startTime` এবং `commitTime`: React কখন রেন্ডারিং শুরু করেছিল এবং কখন এটি DOM-এ আপডেটটি কমিট করেছিল তার টাইমস্ট্যাম্প। এগুলি সময়ের সাথে পারফরম্যান্স ট্র্যাক করতে ব্যবহার করা যেতে পারে।
• `interactions`: যখন আপডেটটি নির্ধারিত হয়েছিল তখন যে "ইন্টারঅ্যাকশনগুলো" ট্রেস করা হচ্ছিল তার একটি সেট (এটি আপডেটের কারণ ট্রেস করার জন্য একটি পরীক্ষামূলক API-এর অংশ)।

প্রোফাইলারের আউটপুট বোঝা: একটি গাইডেড ট্যুর

আপনি React DevTools-এ একটি রেকর্ডিং সেশন বন্ধ করার পরে, আপনাকে প্রচুর তথ্য দেখানো হয়। চলুন UI-এর প্রধান অংশগুলো ভেঙে দেখি।

কমিট সিলেক্টর

প্রোফাইলারের শীর্ষে, আপনি একটি বার চার্ট দেখতে পাবেন। এই চার্টের প্রতিটি বার আপনার রেকর্ডিংয়ের সময় React DOM-এ করা একটি একক "কমিট" উপস্থাপন করে। বারের উচ্চতা এবং রঙ নির্দেশ করে যে সেই কমিটটি রেন্ডার করতে কত সময় লেগেছে—লম্বা, হলুদ/কমলা বারগুলো খাটো, নীল/সবুজ বারের চেয়ে বেশি ব্যয়বহুল। আপনি প্রতিটি নির্দিষ্ট রেন্ডার চক্রের বিবরণ দেখতে এই বারগুলিতে ক্লিক করতে পারেন।

ফ্লেমগ্রাফ চার্ট

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

• কম্পোনেন্ট হায়ারার্কি: চার্টটি আপনার কম্পোনেন্ট ট্রির মতো কাঠামোবদ্ধ। উপরের কম্পোনেন্টগুলো তাদের নীচের কম্পোনেন্টগুলোকে কল করেছে।
• রেন্ডার সময়: একটি কম্পোনেন্টের বারের প্রস্থ নির্দেশ করে যে এটি এবং এর চাইল্ড কম্পোনেন্টগুলো রেন্ডার হতে কত সময় নিয়েছে। চওড়া বারগুলোই আপনার প্রথমে তদন্ত করা উচিত।
• রঙের কোডিং: বারের রঙও রেন্ডারের সময় নির্দেশ করে, দ্রুত রেন্ডারের জন্য শীতল রঙ (নীল, সবুজ) থেকে ধীর রেন্ডারের জন্য উষ্ণ রঙ (হলুদ, কমলা, লাল) পর্যন্ত।
• ধূসর কম্পোনেন্ট: একটি ধূসর বার মানে কম্পোনেন্টটি এই নির্দিষ্ট কমিটের সময় পুনরায় রেন্ডার হয়নি। এটি একটি দুর্দান্ত লক্ষণ! এর মানে হলো আপনার মেমোাইজেশন কৌশলগুলো সম্ভবত সেই কম্পোনেন্টের জন্য কাজ করছে।

র‌্যাঙ্কড চার্ট

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

কম্পোনেন্ট ডিটেইলস প্যান

যখন আপনি ফ্লেমগ্রাফ বা র‌্যাঙ্কড চার্টে একটি নির্দিষ্ট কম্পোনেন্টে ক্লিক করেন, তখন ডানদিকে একটি ডিটেইলস প্যান উপস্থিত হয়। এখানেই আপনি সবচেয়ে কার্যকরী তথ্য খুঁজে পাবেন:

• রেন্ডার সময়কাল: এটি নির্বাচিত কমিটে সেই কম্পোনেন্টের জন্য `actualDuration` এবং `baseDuration` দেখায়।
• "Rendered at": এটি সেই সমস্ত কমিট তালিকাভুক্ত করে যেখানে এই কম্পোনেন্টটি রেন্ডার হয়েছে, যা আপনাকে দ্রুত দেখতে দেয় এটি কত ঘন ঘন আপডেট হয়।
• "Why did this render?": এটি প্রায়শই সবচেয়ে মূল্যবান তথ্য। React DevTools আপনাকে বলার জন্য যথাসাধ্য চেষ্টা করবে কেন একটি কম্পোনেন্ট পুনরায় রেন্ডার হয়েছে। সাধারণ কারণগুলোর মধ্যে রয়েছে:
  • প্রপস পরিবর্তিত হয়েছে
  • হুক পরিবর্তিত হয়েছে (যেমন, একটি `useState` বা `useReducer` মান আপডেট করা হয়েছে)
  • প্যারেন্ট কম্পোনেন্ট রেন্ডার হয়েছে (এটি চাইল্ড কম্পোনেন্টগুলোতে অপ্রয়োজনীয় রি-রেন্ডারের একটি সাধারণ কারণ)
  • কনটেক্সট পরিবর্তিত হয়েছে

সাধারণ পারফরম্যান্সের বাধা এবং সেগুলো কীভাবে ঠিক করবেন

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

সমস্যা ১: অপ্রয়োজনীয় রি-রেন্ডার

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

শনাক্তকরণ:

• প্রোফাইলারে, আপনি দেখতে পান একটি কম্পোনেন্ট অনেকগুলো কমিট জুড়ে খুব ঘন ঘন রেন্ডার হচ্ছে।
• "Why did this render?" বিভাগে নির্দেশ করে যে এটি তার প্যারেন্ট কম্পোনেন্ট রি-রেন্ডার হওয়ার কারণে হয়েছে, যদিও তার নিজের প্রপস পরিবর্তিত হয়নি।
• ফ্লেমগ্রাফের অনেক কম্পোনেন্ট রঙিন, যদিও তাদের নির্ভর করা স্টেটের একটি ছোট অংশই আসলে পরিবর্তিত হয়েছে।

সমাধান ১: `React.memo()`

`React.memo` একটি হায়ার-অর্ডার কম্পোনেন্ট (HOC) যা আপনার কম্পোনেন্টকে মেমোইজ করে। এটি কম্পোনেন্টের পূর্ববর্তী এবং নতুন প্রপসের একটি শ্যালো (shallow) তুলনা করে। যদি প্রপস একই থাকে, React কম্পোনেন্টটি পুনরায় রেন্ডার করা এড়িয়ে যাবে এবং শেষ রেন্ডার করা ফলাফলটি পুনরায় ব্যবহার করবে।

`React.memo` ব্যবহারের আগে:**

function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
}

// In parent:
// যদি প্যারেন্ট কোনো কারণে রি-রেন্ডার হয় (যেমন, তার নিজস্ব স্টেট পরিবর্তন হয়),
// UserAvatar রি-রেন্ডার হবে, এমনকি যদি userName এবং avatarUrl একই থাকে।

import React from 'react';

const UserAvatar = React.memo(function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
});

// এখন, UserAvatar শুধুমাত্র তখনই রি-রেন্ডার হবে যদি userName বা avatarUrl প্রপস আসলে পরিবর্তিত হয়।

function ParentComponent() {
  const [count, setCount] = useState(0);

  // এই ফাংশনটি ParentComponent-এর প্রতিটি রেন্ডারে নতুন করে তৈরি হয়
  const handleItemClick = (id) => {
    console.log('Clicked item', id);
  };

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* count পরিবর্তন হলে প্রতিবার MemoizedListItem রি-রেন্ডার হবে, কারণ handleItemClick একটি নতুন ফাংশন */}
      
    
  );
}

import { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // এই ফাংশনটি এখন মেমোইজড এবং এর ডিপেন্ডেন্সি (খালি অ্যারে) পরিবর্তন না হওয়া পর্যন্ত নতুন করে তৈরি হবে না।
  const handleItemClick = useCallback((id) => {
    console.log('Clicked item', id);
  }, []); // খালি ডিপেন্ডেন্সি অ্যারে মানে এটি শুধুমাত্র একবার তৈরি হয়

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* এখন, count পরিবর্তন হলে MemoizedListItem রি-রেন্ডার হবে না */}
      
    
  );
}

function ProductList({ products, filterTerm }) {
  // এই ব্যয়বহুল ফিল্টারিং অপারেশনটি ProductList-এর প্রতিটি রেন্ডারে চলে,
  // এমনকি যদি শুধুমাত্র একটি সম্পর্কহীন প্রপ পরিবর্তিত হয়।
  const visibleProducts = products.filter(p => p.name.includes(filterTerm));

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

import { useMemo } from 'react';

function ProductList({ products, filterTerm }) {
  // এই গণনাটি এখন শুধুমাত্র `products` বা `filterTerm` পরিবর্তন হলেই চলে।
  const visibleProducts = useMemo(() => {
    return products.filter(p => p.name.includes(filterTerm));
  }, [products, filterTerm]);

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

// AppContext.js
const AppContext = createContext({ 
  currentUser: null, 
  theme: 'light', 
  language: 'en',
  setTheme: () => {}, 
  // ... এবং আরও ২০টি মান
});

// MyComponent.js
// এই কম্পোনেন্টটির কেবল currentUser প্রয়োজন, কিন্তু থিম পরিবর্তন হলেও এটি রি-রেন্ডার হবে!
const { currentUser } = useContext(AppContext);

// UserContext.js
const UserContext = createContext(null);

// ThemeContext.js
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });

// MyComponent.js
// এই কম্পোনেন্টটি এখন শুধুমাত্র currentUser পরিবর্তন হলেই রি-রেন্ডার হবে।
const currentUser = useContext(UserContext);

// webpack.config.js
module.exports = {
  // ... অন্যান্য কনফিগারেশন
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    },
  },
};