ரியாக்ட் ப்ரொஃபைலர் API-ஐ முழுமையாகக் கற்றுக்கொள்ளுங்கள். செயல்திறன் தடைகளைக் கண்டறியவும், தேவையற்ற re-render-களை சரிசெய்யவும், நடைமுறை எடுத்துக்காட்டுகள் மற்றும் சிறந்த பழக்கவழக்கங்களுடன் உங்கள் செயலியை மேம்படுத்தவும் கற்றுக்கொள்ளுங்கள்.
உச்ச செயல்திறனைத் திறத்தல்: ரியாக்ட் ப்ரொஃபைலர் API-இல் ஒரு ஆழமான பார்வை
நவீன வலை உருவாக்க உலகில், பயனர் அனுபவம் மிக முக்கியமானது. ஒரு மென்மையான, பதிலளிக்கக்கூடிய இடைமுகம் ஒரு மகிழ்ச்சியான பயனருக்கும் விரக்தியடைந்த பயனருக்கும் இடையிலான தீர்மானிக்கும் காரணியாக இருக்கும். ரியாக்ட் பயன்படுத்தும் டெவலப்பர்களுக்கு, சிக்கலான மற்றும் மாறும் பயனர் இடைமுகங்களை உருவாக்குவது முன்பை விட எளிதாக உள்ளது. இருப்பினும், பயன்பாடுகள் சிக்கலானதாக வளரும்போது, செயல்திறன் தடைகளின் அபாயமும் அதிகரிக்கிறது—இது மெதுவான தொடர்புகள், சீரற்ற அனிமேஷன்கள் மற்றும் ஒட்டுமொத்தமாக ஒரு மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும் நுட்பமான திறமையின்மைகள். இந்த இடத்தில்தான் ரியாக்ட் ப்ரொஃபைலர் API ஒரு டெவலப்பரின் கருவிப்பெட்டியில் ஒரு தவிர்க்க முடியாத கருவியாக மாறுகிறது.
இந்த விரிவான வழிகாட்டி உங்களை ரியாக்ட் ப்ரொஃபைலரின் ஆழமான ஆய்வுக்கு அழைத்துச் செல்லும். அது என்ன, ரியாக்ட் டெவ்டூல்ஸ் மற்றும் அதன் நிரலாக்க API மூலம் அதை எவ்வாறு திறம்பட பயன்படுத்துவது, மற்றும் மிக முக்கியமாக, பொதுவான செயல்திறன் சிக்கல்களைக் கண்டறிந்து சரிசெய்ய அதன் வெளியீட்டை எவ்வாறு விளக்குவது என்பதை நாங்கள் ஆராய்வோம். இறுதியில், செயல்திறன் பகுப்பாய்வை ஒரு கடினமான பணியிலிருந்து உங்கள் மேம்பாட்டுப் பணிப்பாய்வின் ஒரு முறையான மற்றும் பலனளிக்கும் பகுதியாக மாற்றுவதற்கு நீங்கள் தயாராக இருப்பீர்கள்.
ரியாக்ட் ப்ரொஃபைலர் API என்றால் என்ன?
ரியாக்ட் ப்ரொஃபைலர் என்பது ஒரு ரியாக்ட் பயன்பாட்டின் செயல்திறனை அளவிட டெவலப்பர்களுக்கு உதவும் ஒரு சிறப்பு கருவியாகும். அதன் முக்கிய செயல்பாடு, உங்கள் பயன்பாட்டில் ரெண்டர் ஆகும் ஒவ்வொரு காம்போனென்ட் பற்றிய நேரத் தகவலைச் சேகரிப்பதாகும். இது உங்கள் பயன்பாட்டின் எந்தப் பகுதிகள் ரெண்டர் செய்ய அதிக செலவாகின்றன மற்றும் செயல்திறன் சிக்கல்களை ஏற்படுத்தக்கூடும் என்பதைக் கண்டறிய உங்களை அனுமதிக்கிறது.
இது போன்ற முக்கியமான கேள்விகளுக்கு பதிலளிக்கிறது:
- ஒரு குறிப்பிட்ட காம்போனென்ட் ரெண்டர் ஆக எவ்வளவு நேரம் ஆகும்?
- ஒரு பயனர் தொடர்பின் போது ஒரு காம்போனென்ட் எத்தனை முறை மீண்டும் ரெண்டர் (re-render) ஆகிறது?
- ஒரு குறிப்பிட்ட காம்போனென்ட் ஏன் மீண்டும் ரெண்டர் ஆனது?
ரியாக்ட் ப்ரொஃபைலரை, Chrome DevTools-இல் உள்ள Performance tab அல்லது Lighthouse போன்ற பொதுவான பிரவுசர் செயல்திறன் கருவிகளிலிருந்து வேறுபடுத்துவது முக்கியம். அந்த கருவிகள் ஒட்டுமொத்த பக்கச் சுமை, நெட்வொர்க் கோரிக்கைகள் மற்றும் ஸ்கிரிப்ட் செயல்படுத்தும் நேரத்தை அளவிடுவதற்குச் சிறந்தவை என்றாலும், ரியாக்ட் ப்ரொஃபைலர் உங்களுக்கு ரியாக்ட் சூழலுக்குள் செயல்திறனைப் பற்றிய ஒரு கவனம் செலுத்திய, காம்போனென்ட்-நிலை பார்வையை வழங்குகிறது. இது ரியாக்ட் வாழ்க்கைச் சுழற்சியைப் புரிந்துகொள்கிறது மற்றும் ஸ்டேட் மாற்றங்கள், ப்ராப்ஸ் மற்றும் கான்டெக்ஸ்ட் தொடர்பான திறமையின்மைகளை மற்ற கருவிகளால் காண முடியாதவற்றைக் கண்டறிய முடியும்.
ப்ரொஃபைலர் இரண்டு முக்கிய வடிவங்களில் கிடைக்கிறது:
- ரியாக்ட் டெவ்டூல்ஸ் நீட்டிப்பு (The React DevTools Extension): உங்கள் உலாவியின் டெவலப்பர் கருவிகளில் நேரடியாக ஒருங்கிணைக்கப்பட்ட ஒரு பயனர் நட்பு, வரைகலை இடைமுகம். ப்ரொஃபைலிங்கைத் தொடங்க இது மிகவும் பொதுவான வழியாகும்.
- நிரலாக்க `
` காம்போனென்ட் (The Programmatic ` செயல்திறன் அளவீடுகளை நிரலாக்கமாக சேகரிக்க உங்கள் JSX குறியீட்டில் நேரடியாகச் சேர்க்கக்கூடிய ஒரு காம்போனென்ட். இது தானியங்கு சோதனை அல்லது பகுப்பாய்வு சேவைக்கு மெட்ரிக்குகளை அனுப்புவதற்கு பயனுள்ளதாக இருக்கும்.` Component):
முக்கியமாக, ப்ரொஃபைலர் டெவலப்மெண்ட் சூழல்களுக்காக வடிவமைக்கப்பட்டுள்ளது. ப்ரொஃபைலிங் இயக்கப்பட்ட ஒரு சிறப்பு புரொடக்ஷன் பில்ட் இருந்தாலும், ரியாக்ட்டின் நிலையான புரொடக்ஷன் பில்ட் இந்த செயல்பாட்டை நீக்கிவிடுகிறது, இதனால் உங்கள் இறுதிப் பயனர்களுக்கு லைப்ரரி முடிந்தவரை மெலிதாகவும் வேகமாகவும் இருக்கும்.
தொடங்குதல்: ரியாக்ட் ப்ரொஃபைலரை எவ்வாறு பயன்படுத்துவது
இப்போது நடைமுறைக்கு வருவோம். உங்கள் பயன்பாட்டை ப்ரொஃபைலிங் செய்வது ஒரு நேரடியான செயல்முறை, மற்றும் இரண்டு முறைகளையும் புரிந்துகொள்வது உங்களுக்கு அதிகபட்ச நெகிழ்வுத்தன்மையைக் கொடுக்கும்.
முறை 1: ரியாக்ட் டெவ்டூல்ஸ் ப்ரொஃபைலர் டேப்
பெரும்பாலான அன்றாட செயல்திறன் பிழைத்திருத்தத்திற்கு, ரியாக்ட் டெவ்டூல்ஸில் உள்ள ப்ரொஃபைலர் டேப் தான் உங்கள் செல்ல வேண்டிய கருவி. நீங்கள் அதை நிறுவவில்லை என்றால், அதுவே முதல் படி—உங்கள் விருப்பமான உலாவிக்கு (Chrome, Firefox, Edge) நீட்டிப்பைப் பெறுங்கள்.
உங்கள் முதல் ப்ரொஃபைலிங் அமர்வை நடத்துவதற்கான படிப்படியான வழிகாட்டி இதோ:
- உங்கள் பயன்பாட்டைத் திறக்கவும்: டெவலப்மெண்ட் பயன்முறையில் இயங்கும் உங்கள் ரியாக்ட் பயன்பாட்டிற்குச் செல்லவும். உங்கள் உலாவியின் நீட்டிப்புப் பட்டியில் ரியாக்ட் ஐகானைக் கண்டால் டெவ்டூல்ஸ் செயலில் உள்ளது என்பதை நீங்கள் அறிந்துகொள்ளலாம்.
- டெவலப்பர் கருவிகளைத் திறக்கவும்: உங்கள் உலாவியின் டெவலப்பர் கருவிகளைத் திறக்கவும் (பொதுவாக F12 அல்லது Ctrl+Shift+I / Cmd+Option+I உடன்) மற்றும் "Profiler" டேப்பைக் கண்டறியவும். உங்களிடம் பல டேப்கள் இருந்தால், அது ஒரு "»" அம்புக்குறியின் பின்னால் மறைக்கப்பட்டிருக்கலாம்.
- ப்ரொஃபைலிங்கைத் தொடங்கவும்: ப்ரொஃபைலர் UI-இல் ஒரு நீல வட்டத்தைக் (ரெக்கார்ட் பட்டன்) காண்பீர்கள். செயல்திறன் தரவைப் பதிவுசெய்யத் தொடங்க அதைக் கிளிக் செய்யவும்.
- உங்கள் செயலியுடன் தொடர்பு கொள்ளவும்: நீங்கள் அளவிட விரும்பும் செயலைச் செய்யவும். இது ஒரு பக்கத்தை ஏற்றுவது, ஒரு மோடல் திறக்கும் பொத்தானைக் கிளிக் செய்வது, ஒரு படிவத்தில் தட்டச்சு செய்வது அல்லது ஒரு பெரிய பட்டியலை வடிகட்டுவது என எதுவாகவும் இருக்கலாம். மெதுவாக உணரும் பயனர் தொடர்பை மீண்டும் உருவாக்குவதே குறிக்கோள்.
- ப்ரொஃபைலிங்கை நிறுத்தவும்: நீங்கள் தொடர்பை முடித்தவுடன், அமர்வை நிறுத்த மீண்டும் ரெக்கார்ட் பொத்தானைக் கிளிக் செய்யவும் (அது இப்போது சிவப்பாக இருக்கும்).
அவ்வளவுதான்! ப்ரொஃபைலர் அது சேகரித்த தரவைச் செயலாக்கி, அந்தத் தொடர்பின் போது உங்கள் பயன்பாட்டின் ரெண்டர் செயல்திறனின் விரிவான காட்சிப்படுத்தலை உங்களுக்கு வழங்கும்.
முறை 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.
`React.memo`-க்கு பின்:**
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.
தீர்வு 2: `useCallback()`
`React.memo` ஆனது பொருள்கள் அல்லது செயல்பாடுகள் போன்ற ப்ரிமிடிவ் அல்லாத மதிப்புகளான ப்ராப்ஸ்களால் தோற்கடிக்கப்படலாம். ஜாவாஸ்கிரிப்டில், `() => {} !== () => {}`. ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய செயல்பாடு உருவாக்கப்படுகிறது, எனவே நீங்கள் ஒரு மெமோயிஸ் செய்யப்பட்ட காம்போனென்ட்டிற்கு ஒரு செயல்பாட்டை ப்ராப்ஸாக அனுப்பினால், அது இன்னும் மீண்டும் ரெண்டர் ஆகும்.
`useCallback` ஹூக், அதன் சார்புகளில் ஒன்று மாறியிருந்தால் மட்டுமே மாறும் கால்பேக் செயல்பாட்டின் மெமோயிஸ் செய்யப்பட்ட பதிப்பைத் திருப்புவதன் மூலம் இந்த சிக்கலைத் தீர்க்கிறது.
`useCallback`-க்கு முன்:**
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 (
{/* MemoizedListItem will re-render every time count changes, because handleItemClick is a new function */}
);
}
`useCallback`-க்கு பின்:**
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 (
{/* Now, MemoizedListItem will NOT re-render when count changes */}
);
}
தீர்வு 3: `useMemo()`
`useCallback`-ஐப் போலவே, `useMemo` மதிப்புகளை மெமோயிஸ் செய்வதற்கானது. இது விலையுயர்ந்த கணக்கீடுகளுக்கு அல்லது ஒவ்வொரு ரெண்டரிலும் நீங்கள் மீண்டும் உருவாக்க விரும்பாத சிக்கலான பொருள்கள்/அணிகளை உருவாக்குவதற்கு ஏற்றது.
`useMemo`-க்கு முன்:**
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}
)}
);
}
`useMemo`-க்கு பின்:**
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}
)}
);
}
சிக்கல் 2: பெரிய மற்றும் விலையுயர்ந்த காம்போனென்ட் மரங்கள்
சில நேரங்களில் சிக்கல் தேவையற்ற re-render-கள் அல்ல, ஆனால் காம்போனென்ட் மரம் மிகப்பெரியதாக இருப்பதால் அல்லது கனமான கணக்கீடுகளைச் செய்வதால் ஒரு ரெண்டர் உண்மையிலேயே மெதுவாக இருக்கிறது.
கண்டறிதல்:
- ஃபிளேம்கிராஃபில், அதிக `baseDuration` மற்றும் `actualDuration`-ஐக் குறிக்கும் மிக அகலமான, மஞ்சள் அல்லது சிவப்பு பார் கொண்ட ஒரு காம்போனென்ட்டைக் காண்கிறீர்கள்.
- இந்த காம்போனென்ட் தோன்றும்போதோ அல்லது புதுப்பிக்கும்போதோ UI முடங்குகிறது அல்லது சீரற்றதாகிறது.
தீர்வு: விண்டோயிங் / விர்ச்சுவலைசேஷன்
நீண்ட பட்டியல்கள் அல்லது பெரிய தரவு கிரிட்களுக்கு, பயனருக்கு வ்யூபோர்ட்டில் தற்போது தெரியும் உருப்படிகளை மட்டும் ரெண்டர் செய்வதே மிகவும் பயனுள்ள தீர்வாகும். இந்த நுட்பம் "விண்டோயிங்" அல்லது "விர்ச்சுவலைசேஷன்" என்று அழைக்கப்படுகிறது. 10,000 பட்டியல் உருப்படிகளை ரெண்டர் செய்வதற்குப் பதிலாக, திரையில் பொருந்தக்கூடிய 20 ஐ மட்டுமே நீங்கள் ரெண்டர் செய்கிறீர்கள். இது DOM முனைகளின் எண்ணிக்கையையும் ரெண்டரிங்கில் செலவழித்த நேரத்தையும் வெகுவாகக் குறைக்கிறது.
இதை புதிதாக செயல்படுத்துவது சிக்கலானதாக இருக்கலாம், ஆனால் அதை எளிதாக்கும் சிறந்த லைப்ரரிகள் உள்ளன:
- `react-window` மற்றும் `react-virtualized` ஆகியவை விர்ச்சுவலைஸ் செய்யப்பட்ட பட்டியல்கள் மற்றும் கிரிட்களை உருவாக்குவதற்கான பிரபலமான, சக்திவாய்ந்த லைப்ரரிகள்.
- சமீபத்தில், `TanStack Virtual` போன்ற லைப்ரரிகள் மிகவும் நெகிழ்வான, ஹூக்-அடிப்படையிலான அணுகுமுறைகளை வழங்குகின்றன.
சிக்கல் 3: கான்டெக்ஸ்ட் API சிக்கல்கள்
ரியாக்ட் கான்டெக்ஸ்ட் API என்பது ப்ராப் டிரில்லிங்கைத் தவிர்ப்பதற்கான ஒரு சக்திவாய்ந்த கருவியாகும், ஆனால் அதற்கு ஒரு குறிப்பிடத்தக்க செயல்திறன் எச்சரிக்கை உள்ளது: ஒரு கான்டெக்ஸ்ட்டைப் பயன்படுத்தும் எந்தவொரு காம்போனென்ட்டும், அந்த கான்டெக்ஸ்ட்டில் உள்ள எந்தவொரு மதிப்பு மாறும்போதும் மீண்டும் ரெண்டர் ஆகும், அந்த காம்போனென்ட் அந்த குறிப்பிட்ட தரவுத் துண்டைப் பயன்படுத்தாவிட்டாலும் கூட.
கண்டறிதல்:
- உங்கள் குளோபல் கான்டெக்ஸ்ட்டில் ஒரு மதிப்பை மட்டும் புதுப்பிக்கிறீர்கள் (எ.கா., ஒரு தீம் டோகிள்).
- ப்ரொஃபைலர் உங்கள் முழு பயன்பாடு முழுவதும் ஏராளமான காம்போனென்ட்கள் மீண்டும் ரெண்டர் ஆவதைக் காட்டுகிறது, தீமுடன் முற்றிலும் தொடர்பில்லாத காம்போனென்ட்கள் கூட.
- "இது ஏன் ரெண்டர் ஆனது?" பகுதி இந்த காம்போனென்ட்களுக்கு "Context changed" என்பதைக் காட்டுகிறது.
தீர்வு: உங்கள் கான்டெக்ஸ்ட்டுகளை பிரிக்கவும்
இதைத் தீர்ப்பதற்கான சிறந்த வழி, ஒரு பெரிய, ஒற்றை `AppContext`-ஐ உருவாக்குவதைத் தவிர்ப்பதாகும். அதற்கு பதிலாக, உங்கள் குளோபல் ஸ்டேட்டை பல, சிறிய, மேலும் நுணுக்கமான கான்டெக்ஸ்ட்டுகளாகப் பிரிக்கவும்.
முன்பு (தவறான பழக்கம்):**
// 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 உடன், உங்கள் உள்ளமைவில் ஒரு அலியாஸைப் பயன்படுத்தலாம்:
// webpack.config.js
module.exports = {
// ... other config
resolve: {
alias: {
'react-dom$': 'react-dom/profiling',
},
},
};
இது உங்கள் வரிசைப்படுத்தப்பட்ட, புரொடக்ஷன்-மேம்படுத்தப்பட்ட தளத்தில் உண்மையான உலக செயல்திறன் சிக்கல்களை பிழைத்திருத்தம் செய்ய ரியாக்ட் டெவ்டூல்ஸ் ப்ரொஃபைலரைப் பயன்படுத்த உங்களை அனுமதிக்கிறது.
செயல்திறனுக்கான ஒரு முன்கூட்டிய அணுகுமுறை
பயனர்கள் வேகம் குறைவாக இருப்பதாக புகார் கூறும் வரை காத்திருக்க வேண்டாம். உங்கள் மேம்பாட்டுப் பணிப்பாய்வில் செயல்திறன் அளவீட்டை ஒருங்கிணைக்கவும்:
- முன்கூட்டியே ப்ரொஃபைல் செய்யவும், அடிக்கடி ப்ரொஃபைல் செய்யவும்: புதிய அம்சங்களை நீங்கள் உருவாக்கும்போது அவற்றைத் தவறாமல் ப்ரொஃபைல் செய்யவும். குறியீடு உங்கள் மனதில் புத்துணர்ச்சியுடன் இருக்கும்போது ஒரு தடையைச் சரிசெய்வது மிகவும் எளிதானது.
- செயல்திறன் வரவுசெலவுகளை நிறுவவும்: முக்கியமான தொடர்புகளுக்கு வரவுசெலவுகளை அமைக்க நிரலாக்க `
` API-ஐப் பயன்படுத்தவும். உதாரணமாக, உங்கள் முக்கிய டாஷ்போர்டை மவுண்ட் செய்வது 200ms-க்கு மேல் எடுக்கக்கூடாது என்று நீங்கள் உறுதிப்படுத்தலாம். - செயல்திறன் சோதனைகளைத் தானியங்குபடுத்துங்கள்: ஒரு ரெண்டர் அதிக நேரம் எடுத்தால் தோல்வியடையும் தானியங்கு சோதனைகளை உருவாக்க, Jest அல்லது Playwright போன்ற சோதனை கட்டமைப்புகளுடன் நிரலாக்க API-ஐப் பயன்படுத்தலாம், இது செயல்திறன் பின்னடைவுகள் ஒன்றிணைக்கப்படுவதைத் தடுக்கிறது.
முடிவுரை
செயல்திறன் மேம்படுத்தல் என்பது ஒரு பின் சிந்தனை அல்ல; இது உயர்தர, தொழில்முறை வலைப் பயன்பாடுகளை உருவாக்குவதன் ஒரு முக்கிய அம்சமாகும். ரியாக்ட் ப்ரொஃபைலர் API, அதன் டெவ்டூல்ஸ் மற்றும் நிரலாக்க வடிவங்களில், ரெண்டரிங் செயல்முறையை எளிதாக்குகிறது மற்றும் தகவலறிந்த முடிவுகளை எடுக்கத் தேவையான உறுதியான தரவை வழங்குகிறது.
இந்தக் கருவியில் தேர்ச்சி பெறுவதன் மூலம், செயல்திறனைப் பற்றி யூகிப்பதிலிருந்து, தடைகளை முறையாகக் கண்டறிந்து, `React.memo`, `useCallback` மற்றும் விர்ச்சுவலைசேஷன் போன்ற இலக்கு மேம்படுத்தல்களைப் பயன்படுத்துவதற்கும், இறுதியில், உங்கள் பயன்பாட்டை வேறுபடுத்திக் காட்டும் வேகமான, மென்மையான மற்றும் மகிழ்ச்சியான பயனர் அனுபவங்களை உருவாக்குவதற்கும் நீங்கள் நகரலாம். இன்றே ப்ரொஃபைலிங் செய்யத் தொடங்குங்கள், உங்கள் ரியாக்ட் திட்டங்களில் அடுத்த கட்ட செயல்திறனைத் திறக்கவும்.