19 ஆகஸ்ட், 2025தமிழ்

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

React காம்போனென்ட் ரெண்டரிங்கைப் புரிந்துகொள்ளுதல்: ஒரு உலகளாவிய பார்வை

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

React ரெண்டரிங்கின் மையம்: அறிவிப்பு UI மற்றும் விர்ச்சுவல் DOM

அதன் மையத்தில், React ஒரு அறிவிப்பு நிரலாக்க பாணியை ஆதரிக்கிறது. UI-ஐ படிப்படியாக எப்படிப் புதுப்பிக்க வேண்டும் என்று உலவிக்குக் கட்டளையிடுவதற்குப் பதிலாக, டெவலப்பர்கள் ஒரு குறிப்பிட்ட நிலையில் UI எப்படி இருக்க வேண்டும் என்பதை விவரிக்கிறார்கள். React பின்னர் இந்த விளக்கத்தை எடுத்து, உலாவியில் உள்ள உண்மையான Document Object Model (DOM)-ஐ திறமையாகப் புதுப்பிக்கிறது. இந்த அறிவிப்புத் தன்மை சிக்கலான UI மேம்பாட்டை கணிசமாக எளிதாக்குகிறது, UI கூறுகளின் நுணுக்கமான கையாளுதலில் கவனம் செலுத்துவதை விட, விரும்பிய இறுதி நிலையில் டெவலப்பர்கள் கவனம் செலுத்த அனுமதிக்கிறது.

React-ன் திறமையான UI புதுப்பிப்புகளுக்குப் பின்னால் உள்ள மாயம், அதன் விர்ச்சுவல் DOM பயன்பாட்டில் உள்ளது. விர்ச்சுவல் DOM என்பது உண்மையான DOM-ன் இலகுவான, நினைவகத்தில் உள்ள பிரதிநிதித்துவம் ஆகும். ஒரு காம்போனென்ட்டின் ஸ்டேட் அல்லது ப்ராப்ஸ் மாறும்போது, React நேரடியாக உலாவியின் DOM-ஐக் கையாளுவதில்லை. பதிலாக, அது புதுப்பிக்கப்பட்ட UI-ஐப் பிரதிநிதித்துவப்படுத்தும் ஒரு புதிய விர்ச்சுவல் DOM மரத்தை உருவாக்குகிறது. இந்த புதிய மரம் பின்னர் முந்தைய விர்ச்சுவல் DOM மரத்துடன் டிஃப்பிங் (diffing) எனப்படும் ஒரு செயல்பாட்டில் ஒப்பிடப்படுகிறது.

டிஃப்பிங் அல்காரிதம், உண்மையான DOM-ஐ புதிய விர்ச்சுவல் DOM-உடன் ஒத்திசைக்கத் தேவையான குறைந்தபட்ச மாற்றங்களைக் கண்டறிகிறது. இந்த செயல்முறை சமரசம் (reconciliation) என்று அழைக்கப்படுகிறது. உண்மையில் மாறியுள்ள DOM-ன் பகுதிகளை மட்டும் புதுப்பிப்பதன் மூலம், React நேரடி DOM கையாளுதலைக் குறைக்கிறது, இது மிகவும் மெதுவாகவும் செயல்திறன் தடைகளை ஏற்படுத்தக்கூடியதாகவும் அறியப்படுகிறது. இந்தத் திறமையான சமரச செயல்முறை React-ன் செயல்திறனுக்கு ஒரு மூலக்கல்லாகும், இது உலகெங்கிலும் உள்ள டெவலப்பர்களுக்கும் பயனர்களுக்கும் பயனளிக்கிறது.

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

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

மவுண்டிங் (Mounting)

மவுண்டிங் கட்டம் என்பது ஒரு காம்போனென்ட் உருவாக்கப்பட்டு முதல் முறையாக DOM-ல் செருகப்படும்போது நிகழ்கிறது. கிளாஸ் காம்போனென்ட்களுக்கு, இதில் ஈடுபட்டுள்ள முக்கிய மெத்தட்கள்:

`constructor()`: முதலில் அழைக்கப்படும் மெத்தட். இது ஸ்டேட்டைத் தொடங்குவதற்கும், நிகழ்வு கையாள்பவர்களை (event handlers) பிணைப்பதற்கும் பயன்படுத்தப்படுகிறது. உங்கள் காம்போனென்ட்டுக்கான ஆரம்பத் தரவை நீங்கள் பொதுவாக இங்குதான் அமைப்பீர்கள்.
`static getDerivedStateFromProps(props, state)`: `render()`-க்கு முன் அழைக்கப்படுகிறது. இது ப்ராப்ஸ் மாற்றங்களுக்குப் பதிலளிக்கும் வகையில் ஸ்டேட்டைப் புதுப்பிக்கப் பயன்படுகிறது. இருப்பினும், முடிந்தால் இதைத் தவிர்ப்பது பெரும்பாலும் பரிந்துரைக்கப்படுகிறது, நேரடி ஸ்டேட் மேலாண்மை அல்லது பிற வாழ்க்கைச் சுழற்சி மெத்தட்களை விரும்புவது நல்லது.
`render()`: ஒரே தேவையான மெத்தட். இது UI எப்படி இருக்க வேண்டும் என்பதை விவரிக்கும் JSX-ஐத் திருப்பித் தரும்.
`componentDidMount()`: ஒரு காம்போனென்ட் மவுண்ட் செய்யப்பட்ட (DOM-ல் செருகப்பட்ட) உடனேயே அழைக்கப்படுகிறது. தரவுப் பெறுதல், சந்தாக்களை அமைத்தல் அல்லது உலாவியின் DOM API-களுடன் தொடர்புகொள்வது போன்ற பக்க விளைவுகளைச் செய்ய இது சிறந்த இடம். உதாரணமாக, ஒரு உலகளாவிய API எண்ட்பாயிண்டிலிருந்து தரவைப் பெறுவது பொதுவாக இங்கு நிகழும்.

ஹூக்குகளைப் பயன்படுத்தும் ஃபங்ஷனல் காம்போனென்ட்களுக்கு, `useEffect()` ஒரு வெற்று சார்பு வரிசையுடன் (`[]`) `componentDidMount()`-க்கு ஒத்த நோக்கத்திற்கு உதவுகிறது, ஆரம்ப ரெண்டர் மற்றும் DOM புதுப்பிப்புகளுக்குப் பிறகு குறியீட்டை இயக்க உங்களை அனுமதிக்கிறது.

அப்டேட்டிங் (Updating)

அப்டேட்டிங் கட்டம் ஒரு காம்போனென்ட்டின் ஸ்டேட் அல்லது ப்ராப்ஸ் மாறும்போது நிகழ்கிறது, இது ஒரு மறு-ரெண்டரைத் தூண்டுகிறது. கிளாஸ் காம்போனென்ட்களுக்கு, பின்வரும் மெத்தட்கள் பொருத்தமானவை:

`static getDerivedStateFromProps(props, state)`: முன்னர் குறிப்பிட்டபடி, ப்ராப்ஸ்களிலிருந்து ஸ்டேட்டைப் பெறப் பயன்படுகிறது.
`shouldComponentUpdate(nextProps, nextState)`: இந்த மெத்தட் ஒரு காம்போனென்ட் மறு-ரெண்டர் செய்ய வேண்டுமா என்பதைக் கட்டுப்படுத்த உங்களை அனுமதிக்கிறது. இயல்பாக, இது `true` ஐத் திருப்பித் தரும், அதாவது ஒவ்வொரு ஸ்டேட் அல்லது ப்ராப் மாற்றத்திலும் காம்போனென்ட் மறு-ரெண்டர் செய்யும். `false` ஐத் திருப்புவது தேவையற்ற மறு-ரெண்டர்களைத் தடுத்து செயல்திறனை மேம்படுத்தும்.
`render()`: புதுப்பிக்கப்பட்ட JSX-ஐத் திருப்பித் தர மீண்டும் அழைக்கப்படுகிறது.
`getSnapshotBeforeUpdate(prevProps, prevState)`: DOM புதுப்பிக்கப்படுவதற்கு சற்று முன்பு அழைக்கப்படுகிறது. இது மாற்றப்படுவதற்கு முன்பு DOM-லிருந்து சில தகவல்களை (எ.கா., ஸ்க்ரோல் நிலை)ப் பிடிக்க உங்களை அனுமதிக்கிறது. திரும்பப் பெறப்பட்ட மதிப்பு `componentDidUpdate()`-க்கு அனுப்பப்படும்.
`componentDidUpdate(prevProps, prevState, snapshot)`: காம்போனென்ட் புதுப்பிக்கப்பட்டு DOM மறு-ரெண்டர் செய்யப்பட்ட உடனேயே அழைக்கப்படுகிறது. இது ப்ராப் அல்லது ஸ்டேட் மாற்றங்களுக்குப் பதிலளிக்கும் வகையில் பக்க விளைவுகளைச் செய்ய ஒரு நல்ல இடம், அதாவது புதுப்பிக்கப்பட்ட தரவுகளின் அடிப்படையில் API அழைப்புகளைச் செய்வது. மறு-ரெண்டரைத் தடுக்க நிபந்தனை தர்க்கத்தைக் கொண்டிருப்பதை உறுதி செய்வதன் மூலம் முடிவில்லாத சுழற்சிகளைத் தவிர்க்க இங்கே எச்சரிக்கையாக இருங்கள்.

ஹூக்குகளுடன் கூடிய ஃபங்ஷனல் காம்போனென்ட்களில், `useState` அல்லது `useReducer` மூலம் நிர்வகிக்கப்படும் ஸ்டேட் மாற்றங்கள், அல்லது ஒரு மறு-ரெண்டரை ஏற்படுத்தும் ப்ராப்ஸ்கள், அவற்றின் சார்புநிலைகள் தடுக்காத வரை `useEffect` கால்பேக்குகளின் செயல்பாட்டைத் தூண்டும். `useMemo` மற்றும் `useCallback` ஹூக்குகள், மதிப்புகளையும் ஃபங்ஷன்களையும் மெமோயிஸ் செய்வதன் மூலம் புதுப்பிப்புகளை மேம்படுத்தவும், தேவையற்ற மறு-கணக்கீடுகளைத் தடுக்கவும் முக்கியமானவை.

அன்மவுண்டிங் (Unmounting)

அன்மவுண்டிங் கட்டம் ஒரு காம்போனென்ட் DOM-லிருந்து அகற்றப்படும்போது நிகழ்கிறது. கிளாஸ் காம்போனென்ட்களுக்கு, முதன்மை மெத்தட்:

`componentWillUnmount()`: ஒரு காம்போனென்ட் அன்மவுண்ட் செய்யப்பட்டு அழிக்கப்படுவதற்கு சற்று முன்பு அழைக்கப்படுகிறது. நினைவகக் கசிவுகளைத் தடுக்க, டைமர்களை அழித்தல், நெட்வொர்க் கோரிக்கைகளை ரத்து செய்தல் அல்லது நிகழ்வு கேட்பவர்களை (event listeners) அகற்றுதல் போன்ற தேவையான எந்தவொரு துப்புரவுப் பணிகளையும் செய்ய இதுவே சரியான இடம். ஒரு உலகளாவிய அரட்டைப் பயன்பாட்டைக் கற்பனை செய்து பாருங்கள்; ஒரு காம்போனென்ட்டை அன்மவுண்ட் செய்வது ஒரு WebSocket சேவையகத்திலிருந்து துண்டிக்கப்படுவதை உள்ளடக்கியிருக்கலாம்.

ஃபங்ஷனல் காம்போனென்ட்களில், `useEffect`-லிருந்து திரும்பப் பெறப்பட்ட துப்புரவு ஃபங்ஷன் அதே நோக்கத்திற்கு உதவுகிறது. எடுத்துக்காட்டாக, நீங்கள் `useEffect`-ல் ஒரு டைமரை அமைத்தால், அந்த டைமரை அழிக்கும் ஒரு ஃபங்ஷனை `useEffect`-லிருந்து திருப்பித் தருவீர்கள்.

Keys: திறமையான பட்டியல் ரெண்டரிங்கிற்கு அவசியம்

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

Keys-க்கான சிறந்த நடைமுறைகள்:

Keys உடன்பிறப்புகளிடையே தனித்துவமாக இருக்க வேண்டும்.
Keys நிலையானதாக இருக்க வேண்டும்; அவை ரெண்டர்களுக்கு இடையில் மாறக்கூடாது.
பட்டியலை மறுவரிசைப்படுத்தலாம், வடிகட்டலாம் அல்லது பட்டியலின் ஆரம்பத்தில் அல்லது நடுவில் உருப்படிகளைச் சேர்க்கலாம் என்றால், அரே இன்டெக்ஸை (array indices) Keys-ஆகப் பயன்படுத்துவதைத் தவிர்க்கவும். ஏனென்றால், பட்டியல் வரிசை மாறினால் இன்டெக்ஸ்கள் மாறும், இது React-ன் சமரச அல்காரிதத்தை குழப்பமடையச் செய்யும்.
உங்கள் தரவிலிருந்து தனிப்பட்ட ID-க்களை (எ.கா., `product.id`, `user.uuid`) Keys-ஆகப் பயன்படுத்த விரும்புங்கள்.

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

React ரெண்டரிங் செயல்திறனை மேம்படுத்துதல்

செயல்திறன் என்பது உலகெங்கிலும் உள்ள டெவலப்பர்களுக்கு ஒரு பொதுவான கவலை. ரெண்டரிங்கை மேம்படுத்த React பல கருவிகளையும் நுட்பங்களையும் வழங்குகிறது:

1. ஃபங்ஷனல் காம்போனென்ட்களுக்கான `React.memo()`

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

உதாரணம்:

            
const ProductCard = React.memo(function ProductCard(props) {
  /* render using props */
});

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

2. `useMemo()` மற்றும் `useCallback()` ஹூக்குகள்

`useMemo()`: ஒரு கணக்கீட்டின் முடிவை மெமோயிஸ் செய்கிறது. இது ஒரு ஃபங்ஷன் மற்றும் ஒரு சார்பு வரிசையை எடுக்கும். சார்புநிலைகளில் ஒன்று மாறியிருந்தால் மட்டுமே ஃபங்ஷன் மீண்டும் செயல்படுத்தப்படும். விலையுயர்ந்த கணக்கீடுகளுக்கு அல்லது சைல்டு காம்போனென்ட்களுக்கு ப்ராப்ஸாக அனுப்பப்படும் ஆப்ஜெக்ட்கள் அல்லது அரேக்களை மெமோயிஸ் செய்ய இது பயனுள்ளதாக இருக்கும்.
`useCallback()`: ஒரு ஃபங்ஷனை மெமோயிஸ் செய்கிறது. இது ஒரு ஃபங்ஷன் மற்றும் ஒரு சார்பு வரிசையை எடுக்கும். சார்புநிலைகளில் ஒன்று மாறியிருந்தால் மட்டுமே மாறும் கால்பேக் ஃபங்ஷனின் மெமோயிஸ் செய்யப்பட்ட பதிப்பை இது திருப்பித் தரும். ஃபங்ஷன்களை ப்ராப்ஸாகப் பெறும் சைல்டு காம்போனென்ட்களின் தேவையற்ற மறு-ரெண்டர்களைத் தடுப்பதற்கு இது முக்கியமானது, குறிப்பாக அந்த ஃபங்ஷன்கள் பேரண்ட் காம்போனென்ட்டுக்குள் வரையறுக்கப்படும்போது.

பல்வேறு உலகளாவிய பிராந்தியங்களிலிருந்து தரவைக் காட்டும் ஒரு சிக்கலான டாஷ்போர்டைக் கற்பனை செய்து பாருங்கள். `useMemo` ஒருங்கிணைக்கப்பட்ட தரவுகளின் கணக்கீட்டை (எ.கா., அனைத்து கண்டங்களிலும் மொத்த விற்பனை) மெமோயிஸ் செய்யப் பயன்படுத்தப்படலாம், மற்றும் `useCallback` குறிப்பிட்ட பிராந்தியத் தரவைக் காட்டும் சிறிய, மெமோயிஸ் செய்யப்பட்ட சைல்டு காம்போனென்ட்களுக்கு அனுப்பப்படும் நிகழ்வு கையாள்பவர் ஃபங்ஷன்களை மெமோயிஸ் செய்யப் பயன்படுத்தப்படலாம்.

3. சோம்பேறி ஏற்றுதல் (Lazy Loading) மற்றும் குறியீடு பிரித்தல் (Code Splitting)

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

குறியீடு பிரித்தலை எளிதாகச் செயல்படுத்த React React.lazy() மற்றும் Suspense-ஐ வழங்குகிறது:

`React.lazy()`: டைனமிக்காக இறக்குமதி செய்யப்பட்ட ஒரு காம்போனென்ட்டை ஒரு சாதாரண காம்போனென்ட்டாக ரெண்டர் செய்ய உங்களை அனுமதிக்கிறது.
`Suspense`: சோம்பேறி காம்போனென்ட் ஏற்றப்படும்போது ஒரு ஏற்றுதல் குறிகாட்டியை (ஃபால்பேக் UI) குறிப்பிட உங்களை அனுமதிக்கிறது.

உதாரணம்:

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

function MyComponent() {
  return (
    
      Loading...}>


  );
}

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

4. பெரிய பட்டியல்களுக்கான விர்ச்சுவலைசேஷன்

ஒரு பட்டியலில் நூற்றுக்கணக்கான அல்லது ஆயிரக்கணக்கான உருப்படிகளை ரெண்டர் செய்வது உலாவியை விரைவாக மூழ்கடித்துவிடும். விர்ச்சுவலைசேஷன் (விண்டோயிங் என்றும் அழைக்கப்படுகிறது) என்பது தற்போது வ்யூபோர்ட்டில் தெரியும் உருப்படிகள் மட்டுமே ரெண்டர் செய்யப்படும் ஒரு நுட்பமாகும். பயனர் ஸ்க்ரோல் செய்யும்போது, புதிய உருப்படிகள் ரெண்டர் செய்யப்படுகின்றன, மேலும் பார்வைக்கு வெளியே செல்லும் உருப்படிகள் அன்மவுண்ட் செய்யப்படுகின்றன. react-window மற்றும் react-virtualized போன்ற லைப்ரரிகள் இதற்கு வலுவான தீர்வுகளை வழங்குகின்றன.

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

ரெண்டரிங்கில் ஸ்டேட் மற்றும் ப்ராப்ஸைப் புரிந்துகொள்ளுதல்

React காம்போனென்ட்களின் ரெண்டரிங் அடிப்படையில் அவற்றின் ஸ்டேட் மற்றும் ப்ராப்ஸ் மூலம் இயக்கப்படுகிறது.

ப்ராப்ஸ் (Properties): ப்ராப்ஸ் ஒரு பேரண்ட் காம்போனென்ட்டிலிருந்து ஒரு சைல்டு காம்போனென்ட்டிற்கு அனுப்பப்படுகின்றன. அவை சைல்டு காம்போனென்ட்டிற்குள் படிக்க மட்டுமேயானவை மற்றும் சைல்டு காம்போனென்ட்களை உள்ளமைக்கவும் தனிப்பயனாக்கவும் ஒரு வழியாகச் செயல்படுகின்றன. ஒரு பேரண்ட் காம்போனென்ட் மறு-ரெண்டர் செய்து புதிய ப்ராப்ஸ்களை அனுப்பும்போது, சைல்டு காம்போனென்ட் பொதுவாக இந்த மாற்றங்களைப் பிரதிபலிக்க மறு-ரெண்டர் செய்யும்.
ஸ்டேட் (State): ஸ்டேட் என்பது ஒரு காம்போனென்ட்டிற்குள் நிர்வகிக்கப்படும் தரவு. இது காலப்போக்கில் மாறக்கூடிய மற்றும் காம்போனென்ட்டின் ரெண்டரிங்கைப் பாதிக்கும் தகவலைப் பிரதிபலிக்கிறது. ஒரு காம்போனென்ட்டின் ஸ்டேட் மாறும்போது (`setState` கிளாஸ் காம்போனென்ட்களில் அல்லது `useState`-இன் அப்டேட்டர் ஃபங்ஷன் ஃபங்ஷனல் காம்போனென்ட்களில்), React அந்த காம்போனென்ட் மற்றும் அதன் சைல்டு காம்போனென்ட்களின் மறு-ரெண்டரைத் திட்டமிடுகிறது (மேம்படுத்தல் நுட்பங்களால் தடுக்கப்படாவிட்டால்).

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

சமரசத்தில் `key`-இன் பங்கு

முன்னர் குறிப்பிட்டபடி, keys மிக முக்கியமானவை. சமரசத்தின் போது, React முந்தைய மரத்தில் உள்ள கூறுகளுடன் தற்போதைய மரத்தில் உள்ள கூறுகளைப் பொருத்த keys-ஐப் பயன்படுத்துகிறது.

React keys உடன் கூடிய கூறுகளின் பட்டியலை எதிர்கொள்ளும்போது:

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

இந்தத் துல்லியமான பொருத்தம், DOM-ஐ திறமையாகப் புதுப்பிக்க React-க்கு உதவுகிறது, தேவையான மாற்றங்களை மட்டுமே செய்கிறது. நிலையான keys இல்லாமல், React தேவையற்ற முறையில் DOM நோட்களையும் காம்போனென்ட் நிகழ்வுகளையும் மீண்டும் உருவாக்கக்கூடும், இது செயல்திறன் அபராதங்கள் மற்றும் காம்போனென்ட் ஸ்டேட்டின் சாத்தியமான இழப்புக்கு (எ.கா., உள்ளீட்டு புல மதிப்புகள்) வழிவகுக்கும்.

React ஒரு காம்போனென்ட்டை எப்போது மறு-ரெண்டர் செய்கிறது?

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

ஸ்டேட் மாற்றம்: ஒரு காம்போனென்ட்டின் உள் ஸ்டேட் `setState()` (கிளாஸ் காம்போனென்ட்கள்) அல்லது `useState()` மூலம் திரும்பப் பெறப்பட்ட செட்டர் ஃபங்ஷன் (ஃபங்ஷனல் காம்போனென்ட்கள்) மூலம் புதுப்பிக்கப்படும்போது.
ப்ராப் மாற்றம்: ஒரு பேரண்ட் காம்போனென்ட் ஒரு சைல்டு காம்போனென்ட்டிற்கு புதிய அல்லது புதுப்பிக்கப்பட்ட ப்ராப்ஸ்களை அனுப்பும்போது.
கட்டாயப் புதுப்பிப்பு (Force Update): அரிதான சந்தர்ப்பங்களில், ஒரு கிளாஸ் காம்போனென்ட்டில் சாதாரண சோதனைகளைத் தவிர்த்து, மறு-ரெண்டரைக் கட்டாயப்படுத்த `forceUpdate()` அழைக்கப்படலாம். இது பொதுவாக ஊக்கப்படுத்தப்படுவதில்லை.
கான்டெக்ஸ்ட் மாற்றம்: ஒரு காம்போனென்ட் கான்டெக்ஸ்ட்டைப் பயன்படுத்தினால் மற்றும் கான்டெக்ஸ்ட் மதிப்பு மாறினால்.
`shouldComponentUpdate` அல்லது `React.memo` முடிவு: இந்த மேம்படுத்தல் வழிமுறைகள் இருந்தால், அவை ப்ராப் அல்லது ஸ்டேட் மாற்றங்களின் அடிப்படையில் மறு-ரெண்டர் செய்ய வேண்டுமா என்பதைத் தீர்மானிக்கலாம்.

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

பொதுவான ரெண்டரிங் தவறுகளும் அவற்றைத் தவிர்ப்பது எப்படி

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

முடிவில்லாத சுழற்சிகள் (Infinite Loops): `componentDidUpdate` அல்லது `useEffect`-க்குள் ஒரு சரியான நிபந்தனை இல்லாமல் ஸ்டேட் அல்லது ப்ராப்ஸ் புதுப்பிக்கப்படும்போது நிகழ்கின்றன, இது தொடர்ச்சியான மறு-ரெண்டர்களின் சுழற்சிக்கு வழிவகுக்கிறது. எப்போதும் சார்பு சோதனைகள் அல்லது நிபந்தனை தர்க்கத்தைச் சேர்க்கவும்.
தேவையற்ற மறு-ரெண்டர்கள்: காம்போனென்ட்கள் அவற்றின் ப்ராப்ஸ் அல்லது ஸ்டேட் உண்மையில் மாறாதபோது மறு-ரெண்டர் செய்தல். இதை `React.memo`, `useMemo`, மற்றும் `useCallback` பயன்படுத்தி சரிசெய்யலாம்.
தவறான Key பயன்பாடு: மறுவரிசைப்படுத்தக்கூடிய அல்லது வடிகட்டக்கூடிய பட்டியல்களுக்கு அரே இன்டெக்ஸை Keys-ஆகப் பயன்படுத்துவது, தவறான UI புதுப்பிப்புகள் மற்றும் ஸ்டேட் மேலாண்மை சிக்கல்களுக்கு வழிவகுக்கும்.
`forceUpdate()`-ன் அதிகப்படியான பயன்பாடு: `forceUpdate()`-ஐச் சார்ந்திருப்பது பெரும்பாலும் ஸ்டேட் மேலாண்மை பற்றிய தவறான புரிதலைக் குறிக்கிறது மற்றும் கணிக்க முடியாத நடத்தைக்கு வழிவகுக்கும்.
சுத்தம் செய்வதைப் புறக்கணித்தல்: `componentWillUnmount` அல்லது `useEffect`-ன் துப்புரவு ஃபங்ஷனில் வளங்களை (டைமர்கள், சந்தாக்கள், நிகழ்வு கேட்பவர்கள்) சுத்தம் செய்ய மறப்பது நினைவகக் கசிவுகளுக்கு வழிவகுக்கும்.

முடிவுரை

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

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