React applications are built from components, and every component lives a life. It appears on the screen. It reacts to n

React செயலிகள் components மூலம் கட்டமைக்கப்படுகின்றன, மேலும் ஒவ்வொரு component-ம் ஒரு வாழ்வைக் கொண்டுள்ளது. அது திரையில் தோன்றுகிறது. புதிய தகவல்களுக்கு அது எதிர்வினையாற்றுகிறது. இறுதியில் அது மறைந்துவிடுகிறது. இந்தச் சுழற்சியைப் புறக்கணித்தால் அதன் பாதிப்பு உண்மையானது. Memory leaks உருவாகும். Render performance குறையும். பயனர்கள் கிளிக் செய்யும் பொத்தான்கள் பலன் அளிக்காமல் போகலாம், ஏனெனில் அவற்றுடன் இணைக்கப்பட்ட component பத்து நிமிடங்களுக்கு முன்பே unmount ஆகிவிட்டது, ஆனால் event listener இன்னும் செயல்பாட்டில் உள்ளது. Component lifecycle-ஐப் புரிந்துகொள்வது என்பது வெறும் கல்வி சார்ந்த பயிற்சி மட்டுமல்ல. அது நிஜமான பயன்பாட்டில் நம்பகமான மென்பொருளை எழுதுவதற்கான அடித்தளம்.

ஒரு component-ன் இருப்பை மூன்று நிலைகளாகக் கருதுங்கள். டெவலப்பர்கள் பெரும்பாலும் அவற்றை பிறப்பு, வளர்ச்சி மற்றும் மரணம் என்று விவரிக்கிறார்கள். React அவற்றை mounting, updating மற்றும் unmounting என்று அழைக்கிறது. ஒவ்வொரு நிலைக்கும் ஒரு குறிப்பிட்ட வேலை உள்ளது, மேலும் ஒவ்வொரு நிலையும் குறியீட்டை (code) இயக்க அல்லது அதைச் சுத்தம் செய்ய (clean up) ஒரு துல்லியமான தருணத்தை உங்களுக்கு வழங்குகிறது.

மூன்று நிலைகள்

Mounting என்பது பிறப்பு. Component முதன்முதலில் உருவாக்கப்பட்டு browser DOM-இல் சேர்க்கப்படுகிறது. இது உங்கள் setup விண்டோ ஆகும். Component-க்குத் தொலைதூரத் தரவு (remote data) தேவைப்பட்டால், இந்த நேரத்தில் நீங்கள் அதை கோரலாம். Props மூலம் கணக்கிடப்பட்ட ஆரம்ப நிலை (initial state) தேவைப்பட்டால், அதை இங்கே செய்யலாம். Class component காலத்தில், இது componentDidMount-ன் களமாக இருந்தது. நவீன functional components-இல், நீங்கள் அதை useEffect மற்றும் ஒரு காலியான dependency array மூலம் கையாளுகிறீர்கள். முக்கிய விவரம் என்னவென்றால், React அந்த உறுப்பை (element) பக்கத்தில் வைத்தவுடன் இந்த code block ஒருமுறை மட்டுமே இயங்கும். பயனர் சுயவிவரத்தைப் பெறுதல் (fetching a user profile) அல்லது localStorage-லிருந்து ஒரு மதிப்பை வாசிப்பது போன்ற ஒருமுறை மட்டுமே செய்ய வேண்டிய setup-களுக்கு இது மிகவும் பொருத்தமானது.

Updating என்பது வளர்ச்சி. ஒரு mounted component அப்படியே இருக்காது. Parent-லிருந்து Props வருகின்றன. பயனர் தொடர்புகளால் (user interaction) State மாறுகிறது. Parent component மீண்டும் re-render செய்யப்படுவதால், அதைப் பின்பற்றி child component-ம் மாறுகிறது. உங்கள் தரவோடு UI-ஐ ஒத்திசைக்க (sync) React அந்த component-ஐ மீண்டும் re-render செய்கிறது. ஒரு component-ன் வாழ்நாளில் இந்த நிலை பலமுறை மீண்டும் மீண்டும் நிகழும். ஒவ்வொரு முறை ஒரு dependency மாறும்போது, உங்கள் effects மீண்டும் இயங்கும், மேலும் component புதிய வெளியீட்டை (output) DOM-இல் வழங்கும். இந்த நிலை அடிக்கடி நிகழ்வதால், பெரும்பாலான செயல்திறன் சிக்கல்களும் (performance problems) இங்கிருந்துதான் தொடங்குகின்றன. இங்கே செய்யப்படும் தேவையற்ற வேலைகள் விரைவாகப் பெருகும்.

Unmounting என்பது மரணம். பயனர் வேறொரு பக்கத்திற்குச் சென்றாலோ அல்லது ஒரு conditional render மாறியாலோ component திரையை விட்டு வெளியேறுகிறது. இந்த நிலையில், component அழிக்கப்படுகிறது, ஆனால் வெளி உலகம் அதை எப்போதும் தெரிந்துகொள்வதில்லை. Timers தொடர்ந்து இயங்கிக்கொண்டிருக்கும். WebSockets தொடர்ந்து கேட்டுக்கொண்டிருக்கும். window object-இல் உள்ள event listeners இணைக்கப்பட்டே இருக்கும். இவற்றை நீங்கள் சுத்தம் செய்யவில்லை என்றால், அவை இறந்த component-களுக்கான குறிப்புகளை (references) வைத்திருக்கும் மற்றும் memory leak ஏற்படும். Browser, இல்லாத component-களுக்காக (ghosts) நேரத்தை வீணடிக்கும். Component நிரந்தரமாக மறைவதற்கு முன், intervals-களை நிறுத்தவும், இணைப்புகளை மூடவும் மற்றும் listeners-களை நீக்கவும் ஒரு cleanup function-ஐ React உங்களுக்கு வழங்குகிறது.

Class Methods-லிருந்து Hooks வரை

பல ஆண்டுகளாக, React பொறியாளர்கள் class components மூலம் இந்த நிலைகளை நிர்வகித்தனர். Logic பல்வேறு முறைகளாக (methods) பிரிக்கப்பட்டிருந்தது. நீங்கள் componentDidMount-க்குள் தரவை எடுத்தீர்கள், prop மாற்றங்களுக்கு componentDidUpdate-க்குள் பதிலளித்தீர்கள், மற்றும் componentWillUnmount-க்குள் சுத்தம் செய்தீர்கள். சிக்கல் என்னவென்றால், தொடர்புடைய logic சிதறிப் போயிருந்தது. ஒரு நேரலை அரட்டை இணைப்பு (live chat connection) போன்ற ஒரு தனி அம்சத்திற்கு, இணைக்க, thread மாற்றங்களைச் சரிபார்க்க மற்றும் துண்டிக்க மூன்று தனித்த lifecycle methods-களில் code தேவைப்பட்டது.

Hooks அதை மாற்றியது. Functional components-இல் உள்ள useEffect hook, lifecycle phase-ஐப் பொறுத்து அல்லாமல், நோக்கத்தின் (purpose) அடிப்படையில் logic-ஐக் குழுவாக்க அனுமதிக்கிறது. இருப்பினும், எங்கு பார்க்க வேண்டும் என்று உங்களுக்குத் தெரிந்தால், மனநிலை மாதிரி (mental model) தெளிவாகப் பொருந்தும்.

Mounting-ஐக் கையாள, useEffect(() => { ... }, []) என்று எழுதவும். காலியான dependency array, இந்த effect-க்கு வெளிப்புறத் தொடர்புகள் (external dependencies) இல்லை என்று React-இடம் கூறுகிறது, எனவே இது ஆரம்ப render-க்குப் பிறகு மட்டுமே இயங்கும். இது componentDidMount-க்கு மாற்றாக அமைகிறது.

Updates-ஐக் கையாள, React கண்காணிக்க வேண்டிய குறிப்பிட்ட மதிப்புகளைச் சேர்க்கவும்: useEffect(() => { ... }, [dependency]). Render-களுக்கு இடையில் dependency மாறும்போது,