உச்ச செயல்திறனைத் திறத்தல்: ரியாக்ட் ப்ரொஃபைலர் API-இல் ஒரு ஆழமான பார்வை

நவீன வலை உருவாக்க உலகில், பயனர் அனுபவம் மிக முக்கியமானது. ஒரு மென்மையான, பதிலளிக்கக்கூடிய இடைமுகம் ஒரு மகிழ்ச்சியான பயனருக்கும் விரக்தியடைந்த பயனருக்கும் இடையிலான தீர்மானிக்கும் காரணியாக இருக்கும். ரியாக்ட் பயன்படுத்தும் டெவலப்பர்களுக்கு, சிக்கலான மற்றும் மாறும் பயனர் இடைமுகங்களை உருவாக்குவது முன்பை விட எளிதாக உள்ளது. இருப்பினும், பயன்பாடுகள் சிக்கலானதாக வளரும்போது, செயல்திறன் தடைகளின் அபாயமும் அதிகரிக்கிறது—இது மெதுவான தொடர்புகள், சீரற்ற அனிமேஷன்கள் மற்றும் ஒட்டுமொத்தமாக ஒரு மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும் நுட்பமான திறமையின்மைகள். இந்த இடத்தில்தான் ரியாக்ட் ப்ரொஃபைலர் API ஒரு டெவலப்பரின் கருவிப்பெட்டியில் ஒரு தவிர்க்க முடியாத கருவியாக மாறுகிறது.

இந்த விரிவான வழிகாட்டி உங்களை ரியாக்ட் ப்ரொஃபைலரின் ஆழமான ஆய்வுக்கு அழைத்துச் செல்லும். அது என்ன, ரியாக்ட் டெவ்டூல்ஸ் மற்றும் அதன் நிரலாக்க API மூலம் அதை எவ்வாறு திறம்பட பயன்படுத்துவது, மற்றும் மிக முக்கியமாக, பொதுவான செயல்திறன் சிக்கல்களைக் கண்டறிந்து சரிசெய்ய அதன் வெளியீட்டை எவ்வாறு விளக்குவது என்பதை நாங்கள் ஆராய்வோம். இறுதியில், செயல்திறன் பகுப்பாய்வை ஒரு கடினமான பணியிலிருந்து உங்கள் மேம்பாட்டுப் பணிப்பாய்வின் ஒரு முறையான மற்றும் பலனளிக்கும் பகுதியாக மாற்றுவதற்கு நீங்கள் தயாராக இருப்பீர்கள்.

ரியாக்ட் ப்ரொஃபைலர் API என்றால் என்ன?

ரியாக்ட் ப்ரொஃபைலர் என்பது ஒரு ரியாக்ட் பயன்பாட்டின் செயல்திறனை அளவிட டெவலப்பர்களுக்கு உதவும் ஒரு சிறப்பு கருவியாகும். அதன் முக்கிய செயல்பாடு, உங்கள் பயன்பாட்டில் ரெண்டர் ஆகும் ஒவ்வொரு காம்போனென்ட் பற்றிய நேரத் தகவலைச் சேகரிப்பதாகும். இது உங்கள் பயன்பாட்டின் எந்தப் பகுதிகள் ரெண்டர் செய்ய அதிக செலவாகின்றன மற்றும் செயல்திறன் சிக்கல்களை ஏற்படுத்தக்கூடும் என்பதைக் கண்டறிய உங்களை அனுமதிக்கிறது.

இது போன்ற முக்கியமான கேள்விகளுக்கு பதிலளிக்கிறது:

• ஒரு குறிப்பிட்ட காம்போனென்ட் ரெண்டர் ஆக எவ்வளவு நேரம் ஆகும்?
• ஒரு பயனர் தொடர்பின் போது ஒரு காம்போனென்ட் எத்தனை முறை மீண்டும் ரெண்டர் (re-render) ஆகிறது?
• ஒரு குறிப்பிட்ட காம்போனென்ட் ஏன் மீண்டும் ரெண்டர் ஆனது?

ரியாக்ட் ப்ரொஃபைலரை, Chrome DevTools-இல் உள்ள Performance tab அல்லது Lighthouse போன்ற பொதுவான பிரவுசர் செயல்திறன் கருவிகளிலிருந்து வேறுபடுத்துவது முக்கியம். அந்த கருவிகள் ஒட்டுமொத்த பக்கச் சுமை, நெட்வொர்க் கோரிக்கைகள் மற்றும் ஸ்கிரிப்ட் செயல்படுத்தும் நேரத்தை அளவிடுவதற்குச் சிறந்தவை என்றாலும், ரியாக்ட் ப்ரொஃபைலர் உங்களுக்கு ரியாக்ட் சூழலுக்குள் செயல்திறனைப் பற்றிய ஒரு கவனம் செலுத்திய, காம்போனென்ட்-நிலை பார்வையை வழங்குகிறது. இது ரியாக்ட் வாழ்க்கைச் சுழற்சியைப் புரிந்துகொள்கிறது மற்றும் ஸ்டேட் மாற்றங்கள், ப்ராப்ஸ் மற்றும் கான்டெக்ஸ்ட் தொடர்பான திறமையின்மைகளை மற்ற கருவிகளால் காண முடியாதவற்றைக் கண்டறிய முடியும்.

ப்ரொஃபைலர் இரண்டு முக்கிய வடிவங்களில் கிடைக்கிறது:

1. ரியாக்ட் டெவ்டூல்ஸ் நீட்டிப்பு (The React DevTools Extension): உங்கள் உலாவியின் டெவலப்பர் கருவிகளில் நேரடியாக ஒருங்கிணைக்கப்பட்ட ஒரு பயனர் நட்பு, வரைகலை இடைமுகம். ப்ரொஃபைலிங்கைத் தொடங்க இது மிகவும் பொதுவான வழியாகும்.
2. நிரலாக்க `` காம்போனென்ட் (The Programmatic `` Component): செயல்திறன் அளவீடுகளை நிரலாக்கமாக சேகரிக்க உங்கள் JSX குறியீட்டில் நேரடியாகச் சேர்க்கக்கூடிய ஒரு காம்போனென்ட். இது தானியங்கு சோதனை அல்லது பகுப்பாய்வு சேவைக்கு மெட்ரிக்குகளை அனுப்புவதற்கு பயனுள்ளதாக இருக்கும்.

முக்கியமாக, ப்ரொஃபைலர் டெவலப்மெண்ட் சூழல்களுக்காக வடிவமைக்கப்பட்டுள்ளது. ப்ரொஃபைலிங் இயக்கப்பட்ட ஒரு சிறப்பு புரொடக்ஷன் பில்ட் இருந்தாலும், ரியாக்ட்டின் நிலையான புரொடக்ஷன் பில்ட் இந்த செயல்பாட்டை நீக்கிவிடுகிறது, இதனால் உங்கள் இறுதிப் பயனர்களுக்கு லைப்ரரி முடிந்தவரை மெலிதாகவும் வேகமாகவும் இருக்கும்.

தொடங்குதல்: ரியாக்ட் ப்ரொஃபைலரை எவ்வாறு பயன்படுத்துவது

இப்போது நடைமுறைக்கு வருவோம். உங்கள் பயன்பாட்டை ப்ரொஃபைலிங் செய்வது ஒரு நேரடியான செயல்முறை, மற்றும் இரண்டு முறைகளையும் புரிந்துகொள்வது உங்களுக்கு அதிகபட்ச நெகிழ்வுத்தன்மையைக் கொடுக்கும்.

முறை 1: ரியாக்ட் டெவ்டூல்ஸ் ப்ரொஃபைலர் டேப்

பெரும்பாலான அன்றாட செயல்திறன் பிழைத்திருத்தத்திற்கு, ரியாக்ட் டெவ்டூல்ஸில் உள்ள ப்ரொஃபைலர் டேப் தான் உங்கள் செல்ல வேண்டிய கருவி. நீங்கள் அதை நிறுவவில்லை என்றால், அதுவே முதல் படி—உங்கள் விருப்பமான உலாவிக்கு (Chrome, Firefox, Edge) நீட்டிப்பைப் பெறுங்கள்.

உங்கள் முதல் ப்ரொஃபைலிங் அமர்வை நடத்துவதற்கான படிப்படியான வழிகாட்டி இதோ:

1. உங்கள் பயன்பாட்டைத் திறக்கவும்: டெவலப்மெண்ட் பயன்முறையில் இயங்கும் உங்கள் ரியாக்ட் பயன்பாட்டிற்குச் செல்லவும். உங்கள் உலாவியின் நீட்டிப்புப் பட்டியில் ரியாக்ட் ஐகானைக் கண்டால் டெவ்டூல்ஸ் செயலில் உள்ளது என்பதை நீங்கள் அறிந்துகொள்ளலாம்.
2. டெவலப்பர் கருவிகளைத் திறக்கவும்: உங்கள் உலாவியின் டெவலப்பர் கருவிகளைத் திறக்கவும் (பொதுவாக F12 அல்லது Ctrl+Shift+I / Cmd+Option+I உடன்) மற்றும் "Profiler" டேப்பைக் கண்டறியவும். உங்களிடம் பல டேப்கள் இருந்தால், அது ஒரு "»" அம்புக்குறியின் பின்னால் மறைக்கப்பட்டிருக்கலாம்.
3. ப்ரொஃபைலிங்கைத் தொடங்கவும்: ப்ரொஃபைலர் UI-இல் ஒரு நீல வட்டத்தைக் (ரெக்கார்ட் பட்டன்) காண்பீர்கள். செயல்திறன் தரவைப் பதிவுசெய்யத் தொடங்க அதைக் கிளிக் செய்யவும்.
4. உங்கள் செயலியுடன் தொடர்பு கொள்ளவும்: நீங்கள் அளவிட விரும்பும் செயலைச் செய்யவும். இது ஒரு பக்கத்தை ஏற்றுவது, ஒரு மோடல் திறக்கும் பொத்தானைக் கிளிக் செய்வது, ஒரு படிவத்தில் தட்டச்சு செய்வது அல்லது ஒரு பெரிய பட்டியலை வடிகட்டுவது என எதுவாகவும் இருக்கலாம். மெதுவாக உணரும் பயனர் தொடர்பை மீண்டும் உருவாக்குவதே குறிக்கோள்.
5. ப்ரொஃபைலிங்கை நிறுத்தவும்: நீங்கள் தொடர்பை முடித்தவுடன், அமர்வை நிறுத்த மீண்டும் ரெக்கார்ட் பொத்தானைக் கிளிக் செய்யவும் (அது இப்போது சிவப்பாக இருக்கும்).

அவ்வளவுதான்! ப்ரொஃபைலர் அது சேகரித்த தரவைச் செயலாக்கி, அந்தத் தொடர்பின் போது உங்கள் பயன்பாட்டின் ரெண்டர் செயல்திறனின் விரிவான காட்சிப்படுத்தலை உங்களுக்கு வழங்கும்.

முறை 2: நிரலாக்க `Profiler` காம்போனென்ட்

இன்டராக்டிவ் பிழைத்திருத்தத்திற்கு டெவ்டூல்ஸ் சிறந்ததாக இருந்தாலும், சில நேரங்களில் நீங்கள் தானாக செயல்திறன் தரவைச் சேகரிக்க வேண்டியிருக்கும். `react` தொகுப்பிலிருந்து ஏற்றுமதி செய்யப்படும் `` காம்போனென்ட், அதைச் செய்ய உங்களை அனுமதிக்கிறது.

உங்கள் காம்போனென்ட் மரத்தின் எந்தப் பகுதியையும் `` காம்போனென்ட் மூலம் நீங்கள் சுற்றலாம். இதற்கு இரண்டு ப்ராப்ஸ் தேவை:

• `id` (string): நீங்கள் ப்ரொஃபைல் செய்யும் மரத்தின் பகுதிக்கு ஒரு தனித்துவமான அடையாளங்காட்டி. இது வெவ்வேறு ப்ரொஃபைலர்களிடமிருந்து அளவீடுகளை வேறுபடுத்த உதவுகிறது.
• `onRender` (function): ப்ரொஃபைல் செய்யப்பட்ட மரத்திற்குள் உள்ள ஒரு காம்போனென்ட் ஒரு புதுப்பிப்பை "கமிட்" செய்யும் ஒவ்வொரு முறையும் ரியாக்ட் அழைக்கும் ஒரு கால்பேக் செயல்பாடு.

இதோ ஒரு குறியீட்டு எடுத்துக்காட்டு:

import React, { Profiler } from 'react';

// The onRender callback
function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // a set of interactions that triggered the update
) {
  // You can log this data, send it to an analytics endpoint, or aggregate it.
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    

      
        
      
      

        
          
        
      
    
  );
}

`onRender` கால்பேக் அளவுருக்களைப் புரிந்துகொள்ளுதல்:

• `id`: நீங்கள் `` காம்போனென்ட்டிற்கு அனுப்பிய ஸ்டிரிங் `id`.
• `phase`: ஒன்று `"mount"` (காம்போனென்ட் முதல் முறையாக மவுண்ட் செய்யப்பட்டது) அல்லது `"update"` (ப்ராப்ஸ், ஸ்டேட் அல்லது ஹூக்ஸில் ஏற்பட்ட மாற்றங்களால் அது மீண்டும் ரெண்டர் செய்யப்பட்டது).
• `actualDuration`: இந்த குறிப்பிட்ட புதுப்பிப்புக்காக `` மற்றும் அதன் வழித்தோன்றல்களை ரெண்டர் செய்ய எடுத்த நேரம், மில்லி விநாடிகளில். மெதுவான ரெண்டர்களைக் கண்டறிவதற்கான உங்கள் முக்கிய மெட்ரிக் இதுவாகும்.
• `baseDuration`: முழு சப்டிரீயையும் புதிதாக ரெண்டர் செய்ய எவ்வளவு நேரம் ஆகும் என்பதற்கான ஒரு மதிப்பீடு. இது "மோசமான-நிலை" சூழ்நிலை மற்றும் ஒரு காம்போனென்ட் மரத்தின் ஒட்டுமொத்த சிக்கலைப் புரிந்துகொள்ளப் பயனுள்ளதாக இருக்கும். `actualDuration` ஆனது `baseDuration`-ஐ விட மிகவும் குறைவாக இருந்தால், மெமோயிசேஷன் போன்ற மேம்படுத்தல்கள் திறம்பட செயல்படுகின்றன என்பதைக் குறிக்கிறது.
• `startTime` மற்றும் `commitTime`: ரியாக்ட் ரெண்டரிங் செய்யத் தொடங்கியதற்கும், DOM-க்கு புதுப்பிப்பைக் கமிட் செய்ததற்கும் ஆன நேரமுத்திரைகள். இவை காலப்போக்கில் செயல்திறனைக் கண்காணிக்கப் பயன்படுத்தப்படலாம்.
• `interactions`: புதுப்பிப்பு திட்டமிடப்பட்டபோது கண்காணிக்கப்பட்ட "இன்டராக்ஷன்களின்" ஒரு தொகுப்பு (இது புதுப்பிப்புகளின் காரணத்தைக் கண்டறிவதற்கான ஒரு சோதனை API-இன் ஒரு பகுதியாகும்).

ப்ரொஃபைலரின் வெளியீட்டைப் புரிந்துகொள்ளுதல்: ஒரு வழிகாட்டுதல் சுற்றுப்பயணம்

ரியாக்ட் டெவ்டூல்ஸில் ஒரு ரெக்கார்டிங் அமர்வை நிறுத்திய பிறகு, உங்களுக்கு ஏராளமான தகவல்கள் வழங்கப்படும். UI-இன் முக்கிய பகுதிகளைப் பிரிப்போம்.

கமிட் செலக்டர் (The Commit Selector)

ப்ரொஃபைலரின் மேலே, நீங்கள் ஒரு பார் விளக்கப்படத்தைக் காண்பீர்கள். இந்த விளக்கப்படத்தில் உள்ள ஒவ்வொரு பாரும் உங்கள் ரெக்கார்டிங்கின் போது ரியாக்ட் DOM-க்கு செய்த ஒரு "கமிட்"-ஐக் குறிக்கிறது. பாரின் உயரம் மற்றும் நிறம் அந்த கமிட் ரெண்டர் செய்ய எவ்வளவு நேரம் எடுத்தது என்பதைக் குறிக்கிறது—உயரமான, மஞ்சள்/ஆரஞ்சு பார்கள் குறுகிய, நீலம்/பச்சை பார்களை விட அதிக செலவானவை. ஒவ்வொரு குறிப்பிட்ட ரெண்டர் சுழற்சியின் விவரங்களையும் ஆய்வு செய்ய இந்த பார்களைக் கிளிக் செய்யலாம்.

ஃபிளேம்கிராஃப் விளக்கப்படம் (The Flamegraph Chart)

இது மிகவும் சக்திவாய்ந்த காட்சிப்படுத்தல். தேர்ந்தெடுக்கப்பட்ட கமிட்டிற்கு, ஃபிளேம்கிராஃப் உங்கள் பயன்பாட்டில் எந்த காம்போனென்ட்கள் ரெண்டர் செய்யப்பட்டன என்பதைக் காட்டுகிறது. அதை எப்படிப் படிப்பது என்பது இங்கே:

• காம்போனென்ட் படிநிலை: விளக்கப்படம் உங்கள் காம்போனென்ட் மரம் போல கட்டமைக்கப்பட்டுள்ளது. மேலே உள்ள காம்போனென்ட்கள் கீழே உள்ள காம்போனென்ட்களை அழைத்தன.
• ரெண்டர் நேரம்: ஒரு காம்போனென்ட்டின் பாரின் அகலம் அதுவும் அதன் குழந்தைகளும் ரெண்டர் செய்ய எவ்வளவு நேரம் எடுத்தது என்பதோடு தொடர்புடையது. அகலமான பார்கள்தான் நீங்கள் முதலில் விசாரிக்க வேண்டியவை.
• வண்ணக் குறியீட்டு முறை: பாரின் நிறமும் ரெண்டர் நேரத்தைக் குறிக்கிறது, வேகமான ரெண்டர்களுக்கு குளிர் நிறங்கள் (நீலம், பச்சை) முதல் மெதுவான ரெண்டர்களுக்கு சூடான நிறங்கள் (மஞ்சள், ஆரஞ்சு, சிவப்பு) வரை.
• சாம்பல் நிறமாக்கப்பட்ட காம்போனென்ட்கள்: ஒரு சாம்பல் நிற பார் என்றால் அந்த காம்போனென்ட் இந்த குறிப்பிட்ட கமிட்டின் போது மீண்டும் ரெண்டர் ஆகவில்லை. இது ஒரு சிறந்த அறிகுறி! உங்கள் மெமோயிசேஷன் உத்திகள் அந்த காம்போனென்ட்டிற்கு நன்றாக வேலை செய்கின்றன என்று அர்த்தம்.

தரவரிசை விளக்கப்படம் (The Ranked Chart)

ஃபிளேம்கிராஃப் மிகவும் சிக்கலானதாக உணர்ந்தால், நீங்கள் Ranked chart பார்வைக்கு மாறலாம். இந்த பார்வை தேர்ந்தெடுக்கப்பட்ட கமிட்டின் போது ரெண்டர் செய்யப்பட்ட அனைத்து காம்போனென்ட்களையும் பட்டியலிடுகிறது, எது ரெண்டர் செய்ய அதிக நேரம் எடுத்தது என்பதன் அடிப்படையில் வரிசைப்படுத்தப்பட்டுள்ளது. உங்கள் மிகவும் விலையுயர்ந்த காம்போனென்ட்களை உடனடியாகக் கண்டறிய இது ஒரு அருமையான வழியாகும்.

காம்போனென்ட் விவரங்கள் பகுதி (The Component Details Pane)

ஃபிளேம்கிராஃப் அல்லது தரவரிசை விளக்கப்படத்தில் ஒரு குறிப்பிட்ட காம்போனென்ட்டைக் கிளிக் செய்யும் போது, வலதுபுறத்தில் ஒரு விவரங்கள் பகுதி தோன்றும். இங்குதான் நீங்கள் மிகவும் செயல்படக்கூடிய தகவலைக் காணலாம்:

• ரெண்டர் காலங்கள்: இது தேர்ந்தெடுக்கப்பட்ட கமிட்டில் அந்த காம்போனென்ட்டிற்கான `actualDuration` மற்றும் `baseDuration` ஆகியவற்றைக் காட்டுகிறது.
• "Rendered at": இது இந்த காம்போனென்ட் ரெண்டர் செய்யப்பட்ட அனைத்து கமிட்களையும் பட்டியலிடுகிறது, இது எவ்வளவு அடிக்கடி புதுப்பிக்கப்படுகிறது என்பதை விரைவாகக் காண உங்களை அனுமதிக்கிறது.
• "இது ஏன் ரெண்டர் ஆனது?": இது பெரும்பாலும் மிகவும் மதிப்புமிக்க தகவல் துண்டு. ஒரு காம்போனென்ட் ஏன் மீண்டும் ரெண்டர் ஆனது என்பதை ரியாக்ட் டெவ்டூல்ஸ் உங்களுக்குச் சொல்ல தன்னால் முடிந்தவரை முயற்சிக்கும். பொதுவான காரணங்கள் பின்வருமாறு:
  • ப்ராப்ஸ் மாறியுள்ளன
  • ஹூக்ஸ் மாறியுள்ளன (எ.கா., ஒரு `useState` அல்லது `useReducer` மதிப்பு புதுப்பிக்கப்பட்டது)
  • பெற்றோர் காம்போனென்ட் ரெண்டர் ஆனது (இது குழந்தை காம்போனென்ட்களில் தேவையற்ற re-render-களுக்கான ஒரு பொதுவான காரணமாகும்)
  • கான்டெக்ஸ்ட் மாறியுள்ளது

பொதுவான செயல்திறன் தடைகளும் அவற்றைச் சரிசெய்வதற்கான வழிகளும்

இப்போது நீங்கள் செயல்திறன் தரவைச் சேகரித்து படிக்கத் தெரிந்திருப்பதால், ப்ரொஃபைலர் கண்டறிய உதவும் பொதுவான சிக்கல்களையும் அவற்றைத் தீர்க்க நிலையான ரியாக்ட் பேட்டர்ன்களையும் ஆராய்வோம்.

சிக்கல் 1: தேவையற்ற Re-renders

இது ரியாக்ட் பயன்பாடுகளில் மிகவும் பொதுவான செயல்திறன் சிக்கலாகும். ஒரு காம்போனென்ட் அதன் வெளியீடு சரியாக அப்படியே இருந்தாலும் மீண்டும் ரெண்டர் ஆகும் போது இது நிகழ்கிறது. இது CPU சுழற்சிகளை வீணாக்குகிறது மற்றும் உங்கள் UI-ஐ மந்தமாக உணர வைக்கும்.

கண்டறிதல்:

• ப்ரொஃபைலரில், ஒரு காம்போனென்ட் பல கமிட்களில் மிக அடிக்கடி ரெண்டர் ஆவதைக் காண்கிறீர்கள்.
• "இது ஏன் ரெண்டர் ஆனது?" பிரிவு, அதன் சொந்த ப்ராப்ஸ் மாறாவிட்டாலும், அதன் பெற்றோர் காம்போனென்ட் மீண்டும் ரெண்டர் ஆனதால் இது நிகழ்ந்தது என்பதைக் குறிக்கிறது.
• ஃபிளேம்கிராஃபில் உள்ள பல காம்போனென்ட்கள் வண்ணத்தில் உள்ளன, அவை சார்ந்திருக்கும் ஸ்டேட்டின் ஒரு சிறிய பகுதி மட்டுமே உண்மையில் மாறியிருந்தாலும்.

தீர்வு 1: `React.memo()`

`React.memo` என்பது உங்கள் காம்போனென்ட்டை மெமோயிஸ் செய்யும் ஒரு உயர்-வரிசை காம்போனென்ட் (HOC) ஆகும். இது காம்போனென்ட்டின் முந்தைய மற்றும் புதிய ப்ராப்ஸ்களின் ஒரு மேலோட்டமான ஒப்பீட்டைச் செய்கிறது. ப்ராப்ஸ் ஒரே மாதிரியாக இருந்தால், ரியாக்ட் காம்போனென்ட்டை மீண்டும் ரெண்டர் செய்வதைத் தவிர்த்து, கடைசியாக ரெண்டர் செய்யப்பட்ட முடிவைப் பயன்படுத்தும்.

`React.memo`-க்கு முன்:**

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

// In parent:
// If the parent re-renders for any reason (e.g., its own state changes),
// UserAvatar will re-render, even if userName and avatarUrl are identical.

import React from 'react';

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

// Now, UserAvatar will ONLY re-render if the userName or avatarUrl props actually change.

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

  // This function is recreated on every render of ParentComponent
  const handleItemClick = (id) => {
    console.log('Clicked item', id);
  };

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* MemoizedListItem will re-render every time count changes, because handleItemClick is a new function */}
      
    
  );
}

import { useState, useCallback } from 'react';

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

  // This function is now memoized and will not be recreated unless its dependencies (empty array) change.
  const handleItemClick = useCallback((id) => {
    console.log('Clicked item', id);
  }, []); // Empty dependency array means it's created only once

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* Now, MemoizedListItem will NOT re-render when count changes */}
      
    
  );
}

function ProductList({ products, filterTerm }) {
  // This expensive filtering operation runs on EVERY render of ProductList,
  // even if only an unrelated prop changed.
  const visibleProducts = products.filter(p => p.name.includes(filterTerm));

  return (
    

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

import { useMemo } from 'react';

function ProductList({ products, filterTerm }) {
  // This calculation now only runs when `products` or `filterTerm` changes.
  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: () => {}, 
  // ... and 20 other values
});

// MyComponent.js
// This component only needs currentUser, but will re-render when the theme changes!
const { currentUser } = useContext(AppContext);

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

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

// MyComponent.js
// This component now ONLY re-renders when currentUser changes.
const currentUser = useContext(UserContext);

// webpack.config.js
module.exports = {
  // ... other config
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    },
  },
};