ඔබ රාත්රි 2.00ට කෝපි ග්ලෑස් එකක් ගත්තාම, React කොම්පොනන්ට් එකේ useEffect අරගෙන API ඇමතුමක් කරලා, පරණ දත්ත පෙන්වීමේ ගැටලුවට මුහුණ දෙනවා. බොහෝ විට useEffect එකේ dependency array එක හරියට සැකසීමට නොහැකිවීම, loading, error, data යන තත්ත්වයන් සඳහා තනි තනි useState හතක් හදලා, component unmount වුන පසු state update වීමේ warning එකක් දක්නට ලැබෙයි.
React කණ්ඩායම useEffect හරහා බාහිර සම්පත්, DOM event, subscription, timer වැනි side‑effect සම්බන්ධීකරණය සඳහා ලබාදුන්නා. ඒත් කාලයක් ගතවෙද්දි, සංවර්ධකයන් එකම hook එක API call කිරීමේ ප්රධාන මෙවලමක් ලෙස භාවිතා කරලා. කේතය සරලයි, නමුත් වැඩි පරිමාණයක් වෙද්දි ගැටලු වැඩි වෙනවා.
useEffect භාවිතයෙන් ඇති ප්රධාන ගැටලු
- Race condition – පරිශීලකයා filter එකක් ඉක්මනින් මාරු කරනවිට පරණ request එක පසුබැසී නව request එකට පසුදැක්මක් දෙනවා.
- අවශ්ය තත්ත්වයන් මත අධික re‑render – data, loading, error යන තත්ත්ව 3ක් වෙනුවෙන් 3 වාර render වෙයි.
- කැෂ් නොමැතිවීම – පිටුවක් නවතැන්ගත කර නැවත යන විට ඒම API call එක නැවත කරයි.
- හස්තකාර cleanup – request cancelation, unmount පසු state update නවත්වීම සඳහා boilerplate කේත ලියවීමට වෙයි.
මේ ගැටළු විසඳීමට TanStack Query (පෙර React Query) එක හඳුන්වා දෙනවා. ඔබට "මට මේ filter අනුව users ඕන" කියා දෙනවා, queryKey, queryFn සමඟ. ඒකට තවත් useState, useEffect, cleanup එකක් අවශ්ය නෑ. TanStack Query ඔබට පහත වගේ විශේෂත්වයන් ලබා දෙයි:
- ස්වයංක්රීය කැෂ් – එකම දත්ත නැවත ඇමතීම අවශ්ය නැත.
- Deduplication – එකම දත්ත එකම වේලාවේ component දෙකකට ඉල්ලූ විට එක request එකෙන් පරිහරණය වේ.
- Background refetch – stale data ස්වයංක්රීයව නවීකරණය වේ.
- Retry logic – අසාර්ථක request ගන්නා විට exponential backoff සමඟ නැවත උත්සාහ කරයි.
- Optimistic updates – UI එකක් පළාත්මකව පෙන්වීම, server සමඟ පසුගිය සම්මුඛතා.
- Devtools – Chrome extension එකක් මගින් cache, fetching, stale status පෙන්වයි.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ තාක්ෂණ විද්යා ශිෂ්යයන්, start‑up සංවර්ධකයන්, හා IT සමාගම් සඳහා මේ ප්රවේශය විශාල ලාභයක්. කැෂ් සහ deduplication නිසා බ්රහස්පතින්දා පරිශීලකයන්ගේ mobile data වියදම අඩු වේ. පද්ධති පරිපාලකයින්ට backend load අඩු කිරීමෙන් server cost අඩු කරගත හැක. වැඩි පරිමාණයේ data fetching අවශ්ය වන e‑commerce, fintech, health tech වැනි ව්යාපාරික පද්ධතිවල performance වැඩි වේ. එමෙන්ම, නවක සංවර්ධකයින්ට useEffect‑based boilerplate වලින් මුදලක් ගත නොකර, TanStack Query API භාවිතයෙන් කෙටි කාලයකින් production‑ready code ලියන්න පුළුවන්.
අවසන් වශයෙන්, useEffect එකේ imperative logic එකේ බර අඩු කර, declarative data fetching එකට මාරු වීම React ecosystem එකේ සුලභ, පරිසර හිතකාමී, හා scalable development පාරිභෝගිකත්වයක් ලබා දේ.
