React "Re-render" என்று கூறினால், அதற்கு மூன்று அர்த்தங்கள் உள்ளன
நீங்கள் setState-ஐ அழைக்கும்போது, React வெறும் DOM-ஐ மட்டும் புதுப்பிக்காது. அது ஒரு வரிசையில் மூன்று தனித்தனி நிலைகளை (phases) இயக்குகிறது. பெரும்பாலான டெவலப்பர்கள் இந்த நிலைகளை குழப்பிக் கொள்கிறார்கள். இந்த வித்தியாசத்தைப் புரிந்துகொள்வது செயல்திறன் (performance) சிக்கல்களைத் தீர்க்க உதவும்.
மூன்று நிலைகள்:
• Render: React உங்கள் component செயல்பாட்டை (function) அழைக்கிறது. • Reconcile: React புதிய வெளியீட்டை (output) பழைய வெளியீட்டுடன் ஒப்பிடுகிறது. • Commit: React மாற்றங்களை DOM-இல் செயல்படுத்துகிறது.
- Render நிலை (The Render Phase)
React உங்கள் செயல்பாட்டை இயக்குகிறது. இது தற்போதைய props-களைப் பயன்படுத்துகிறது. இந்தச் செயல்பாடு JSX-ஐத் திருப்பித் தருகிறது (returns). இந்த JSX என்பது வெறும் JavaScript object-களின் பட்டியல் மட்டுமே. இதை மக்கள் virtual DOM என்று அழைக்கிறார்கள். இது உண்மையான DOM அல்ல. UI எப்படி இருக்க வேண்டும் என்பதற்கான ஒரு விளக்கம் மட்டுமே. திரையில் இன்னும் எதுவும் தோன்றாது. இந்த நிலை முற்றிலும் கணிதம் மற்றும் தர்க்கத்தை (logic) அடிப்படையாகக் கொண்டது.
- Reconcile நிலை (The Reconcile Phase)
React பழைய tree மற்றும் புதிய tree ஆகிய இரண்டையும் வைத்திருக்கும். அவற்றுக்கிடையேயான வித்தியாசங்களைத் தேடுகிறது. ஒரு element-இன் வகை மாறினால், React முழு tree-யையும் மாற்றியமைக்கும். props மட்டும் மாறினால், React அவற்றை மட்டும் புதுப்பிக்கும். இங்குதான் keys முக்கியத்துவம் பெறுகின்றன. ஒரு பட்டியலில் உள்ள உருப்படிகளை (items) அவற்றின் இடத்திற்குப் பதிலாக, அடையாளத்தின் (identity) அடிப்படையில் பொருத்த keys உதவுகின்றன. DOM-ஐப் புதுப்பிக்கத் தேவையான குறைந்தபட்ச படிகளின் பட்டியலை இந்த நிலை உருவாக்குகிறது.
- Commit நிலை (The Commit Phase)
React மாற்றங்களின் பட்டியலை எடுத்து உண்மையான DOM-இல் செயல்படுத்துகிறது. இது புதிய nodes-களை உருவாக்குகிறது மற்றும் பழையவற்றை நீக்குகிறது. பயனர்கள் திரையில் மாற்றங்களைக் காணும் தருணம் இதுதான். இதற்குப் பிறகு, browser திரையைத் தீட்டுகிறது (paints). பின்னர், useEffect இயங்குகிறது.
பொதுவான தவறான புரிதல்கள்:
• ஒரு re-render எப்போதும் DOM-ஐ மாற்றாது. வெளியீடு ஒன்றாகவே இருந்தால், React commit நிலையில் எதையும் செய்யாது.
• React.memo செயல்பாட்டு அழைப்பைத் (function call) தவிர்க்கிறது. ஆனால் அது DOM புதுப்பிப்பைத் தவிர்க்காது.
• Props ஒரு re-render-ஐத் தூண்டுவதில்லை. ஒரு parent component re-render ஆவதுதான் child component-ஐத் தூண்டுகிறது. Prop மாற்றம் என்பது அதன் ஒரு விளைவு மட்டுமே.
செயல்திறனைச் சரிசெய்வது எப்படி:
உங்கள் செயல்பாடு மெதுவாக இருந்தால், உங்களுக்கு Render சிக்கல் உள்ளது. கடினமான வேலைகளைச் செயல்பாட்டிற்கு வெளியே நகர்த்தவும் அல்லது memoization பயன்படுத்தவும்.
React மிகப்பெரிய பட்டியல்களை மீண்டும் கட்டமைத்தால், உங்களுக்கு Reconcile சிக்கல் உள்ளது. உங்கள் keys-களைச் சரிபார்க்கவும்.
DOM அதிகமாகப் புதுப்பிக்கப்பட்டால், உங்களுக்கு Commit சிக்கல் உள்ளது. virtualization பயன்படுத்தவும் அல்லது உங்கள் கட்டமைப்பை மாற்றவும்.
React 19 மற்றும் React Compiler இப்போது இந்த வேலைகளில் பலவற்றை உங்களுக்காகச் செய்கின்றன. இருப்பினும், இந்த நிலைகளைத் தெரிந்து கொள்வது பிழைகளைத் திருத்த (debug) உங்களுக்கு உதவும்.