React கற்றலில் 5-ஆம் நாள்: Batching மற்றும் Functional Updates

ஒரு state setter-ஐ பலமுறை அழைப்பது பலமுறை render-களை ஏற்படுத்தும் என்று நான் நினைத்தேன்.

நான் தவறாக நினைத்தேன்.

React அதைவிட புத்திசாலித்தனமானது. இது Automatic Batching எனப்படும் ஒரு செயல்முறையைப் பயன்படுத்துகிறது.

ஒவ்வொரு update-க்குப் பிறகும் render செய்வதற்குப் பதிலாக, React அவற்றை ஒன்றாகக் குழுவாக்குகிறது. இது அனைத்து update-களையும் சேகரித்து ஒரே ஒரு முறை மட்டும் render செய்கிறது. இது செயல்திறனை (performance) மேம்படுத்துகிறது.

இன்று நான் கற்றுக்கொண்டவை இதோ.

The Batching Process நீங்கள் பல state functions-களை அழைக்கும்போது, React இந்த வரிசையைப் பின்பற்றுகிறது:

  • பல state updates நிகழ்கின்றன.
  • React அவற்றை ஒன்றாகக் குழுவாக்குகிறது (batches).
  • React ஒரே ஒரு முறை render செய்கிறது.
  • React மாற்றங்களை UI-இல் நடைமுறைப்படுத்துகிறது (commits).

The Problem with Standard Updates நான் இந்த code-ஐ முயற்சி செய்தேன்: setCount(count + 1); setCount(count + 1); setCount(count + 1);

count 0-விலிருந்து 3-ஆக உயரும் என்று நான் எதிர்பார்த்தேன். ஆனால் அது 0-விலிருந்து 1-ஆக மட்டுமே மாறியது.

ஏனெனில் setCount(count + 1) என்பது "count-ஐ அதிகரிக்கவும்" என்று பொருள்படாது. அது "count-ஐ இந்த குறிப்பிட்ட மதிப்பிற்கு மாற்றவும்" என்று பொருள்படும்.

count 0 ஆக இருந்தால், ஒவ்வொரு வரியும் React-இடம் count-ஐ 1 ஆக மாற்றச் சொல்கிறது. React இவற்றை ஒன்றாகக் குழுவாக்கி (batch), இறுதித் தகவல் count-ஐ 1 ஆக மாற்ற வேண்டும் என்பதைக் கண்டறிகிறது.

The Solution: Functional Updates இதைச் சரிசெய்ய, நீங்கள் ஒரு functional update-ஐப் பயன்படுத்த வேண்டும். இது update queue-வில் உள்ள சமீபத்திய state-ஐப் பயன்படுத்துகிறது.

சரியான முறை: setCount((prev) => prev + 1);

நீங்கள் இந்த முறையைப் பயன்படுத்தும்போது, React ஒவ்வொரு update-க்கும் மிகச் சமீபத்திய மதிப்பைக் கொடுக்கிறது.

  • முதல் update: 0 + 1 = 1
  • இரண்டாவது update: 1 + 1 = 2
  • மூன்றாவது update: 2 + 1 = 3

இப்போது counter உண்மையில் 3-ஐ அடைகிறது.

A Common Mistake நான் ஒருமுறை இப்படி எழுதினேன்: setCount((prev) => { prev + 1 });

Counter undefined ஆகிவிட்டது. ஒரு arrow function-இல் curly braces பயன்படுத்தும்போது, நீங்கள் கண்டிப்பாக return keyword-ஐப் பயன்படுத்த வேண்டும். அதற்குப் பதிலாக இதைப் பயன்படுத்தவும்: setCount((prev) => prev + 1);

Key Takeaways:

  • வேகத்தை மேம்படுத்த React பல state updates-களை ஒன்றாகக் குழுவாக்குகிறது (batches).
  • setState அழைப்புகள் எப்போதும் உடனடியாக render-களைத் தூண்டாது.
  • Standard updates தற்போதைய render cycle-இல் உள்ள மதிப்பைப் பயன்படுத்துகின்றன.
  • Functional updates update queue-விலிருந்து சமீபத்திய state-ஐப் பயன்படுத்துகின்றன.
  • இந்த மாற்றங்களை நிர்வகிக்க React ஒரு உள்நிலை Update Queue-வைப் பயன்படுத்துகிறது.

Source: https://dev.to/bismay-exe/day-5-of-learning-react-understanding-automatic-batching-functional-updates-397k