ඔබ යෙදුමේ එක් තිරයක් අරඹා ලැයිස්තුවක් ගන්නා, ප්රියතම බොත්තමක් ඔබන, දුරකථනය හැරවන, පසුබිමට යන – එවිට මතක නසීම, API ඇමතුම් දෙගුණයක්, හෝ බොත්තමක් අඩු වේගයෙන් ක්රියා කරන වගේ ගැටළු හටගත හැකිය. නවීන React Native වල මේ සියල්ල Hooks මගින් කළමනාකරණය කරයි.
Hooks කියන්නේ මොනවාද? එය function component එකක් තුළ state, side‑effect, ref, context, memoization වැනි විශේෂත්වයන් භාවිතා කිරීමට ඉඩ දෙන functions වේ. class component එකක් අවශ්ය නොවෙයි. React වෙබ් වල භාවිතා කරන hooks, React Native වලද ඒමයි; වෙනසක් තියෙන්නේ ඒවා කොහේද, කුමන අවස්ථාවකද යනුවෙන්.
React Native හි Hooks වැදගත් වන්නේ තිරයන් (navigation stacks) වෙබ් පිටු වඩා බහුලව mount/unmount වීම, FlatList වැනි ලැයිස්තු වල අධික re‑render, උපාංග සිදුවීම් (keyboard, AppState, orientation) නිසා side‑effect ඉතා සීඝ්රයෙන් සිදු වීම ආදී හේතු නිසාය. වැරදි useEffect හෝ cleanup නොකිරීමෙන් memory leak, duplicate network calls, UI jank වැනි ගැටළු පණ ගැන්විය හැක.
Hook පවුලේ මූලික වර්ග
- State – UI දත්ත රැක ගැනීම (useState)
- Effect – API ඇමතුම්, listeners (useEffect, useLayoutEffect)
- Ref – mutable value, native node (useRef)
- Context – prop drilling තවත් නොකළේ (useContext)
- Memoization – වියදම් වැඩි calculations (useMemo, useCallback)
- Reducer – සංකීර්ණ state machine (useReducer)
Hooks සෑම render එකකම top‑to‑bottom ක්රමයෙන් ක්රියා කරයි. Effects paint‑කිරීමෙන් පසු, cleanup පසුගිය effect එකට හෝ component unmount වීමේදී ක්රියා කරයි.
Hooks භාවිතයේ නියමයන්
- Hooks කිසිදු if, loop, nested function තුළ නොකොලන්න.
- Hooks එකක් React function component එකක් හෝ custom hook එකක් තුළම පමණක් භාවිතා කරන්න.
- Custom hook නාමය ‘use’ වලින් ආරම්භ විය යුතුය.
- Dependency array එකේ ඔබ කියවන සියලු variable ඇතුළත් කරන්න.
React 18+ strict mode හි development පරිසරයේ component එක mount → unmount → remount වීමෙන් effects දෙවරක් ධාවනය විය හැක. එය double API call එකක් ලෙස පෙනේ නම්, cleanup නිවැරදිව ලියා තිබේද බලන්න.
Hook තෝරා ගැනීමට තීරණ පටිපාටිය
UI data (input, toggle, modal) – useState
බහු‑step state (wizard, filter) – useReducer
render‑පසු side‑effect (API, listener) – useEffect
layout‑පෙර flash‑අඩු කිරීම – useLayoutEffect
re‑render නොකර value රැකගැනීම – useRef
global data (auth, theme) – useContext
expensive calculation cache – useMemo
stable function reference – useCallback
සාමාන්ය වැරදි සහ පරීක්ෂා ලැයිස්තුව
- Conditional hook call – order වෙනස් වීම.
- Dependency array හි අස්ථානගත variable.
- Cleanup නොකිරීමෙන් memory leak.
- useLayoutEffect හි async code – UI freeze.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ mobile development කලාපය ඉක්මනින් වර්ධනය වෙමින් ඇත. මේ නිසා React Native developers, students, businesses සඳහා Hooks පිළිබඳ ගැඹුරු අවබෝධයක් ඇති වීම අත්යවශ්ය වේ.
- සැලසුම්කරුවන්ට UI state management එක සරලව, bug‑free කර ගැනීමට හැකියාව ලැබේ.
- විශ්ව විද්යාල හා තාක්ෂණික පාඨමාලාන්විතයන්ට Hooks‑based curriculum එකක් හඳුන්වා දීමට පදනම සලසා දේ.
- ව්යාපාරිකයන්ට performance‑optimized mobile apps නිර්මාණය කර, පාරිභෝගික අත්දැකීම් වැඩි කර, පිරිවැය අඩු කර ගැනීමට උපකාරී වේ.
Hooks පිළිබඳ නිවැරදි මනෝභාවයක් ගොඩක් කරගත් පසු, ඔබේ React Native යෙදුම් තවත් ස්ථායි, වේගවත්, නිරවද්ය වේ. එමෙන්ම, කණ්ඩායම්වල codebase එකත් සරලව, maintainable වීමට ඉඩ සලසයි.
ඔබත් මේ මාර්ගෝපදේශය අනුගමනය කර, React Native development එකේ නව මට්ටමකට පියනගන්න.
