React යෙදුම් බොහොමයක් පරිශීලකයින් සෙවුම් කොටුවේ ලියන තත්වයේම API ඇමතුම් කරනවා. මෙය අතිරේක ජාල පණිවිඩ, සෙවුම් ප්රතිඵල අඩු වේගය සහ පසුබිම් සේවාදායකය අධික බරක් දැනෙන්න හේතුවක්. මේ ගැටලුවට විසඳුමක් ලෙස debounce තාක්ෂණය භාවිතා කරලා, පරිශීලකයා ටයිප් කිරීම නවතා දැමූ පසු කාලයක් ගත වීමෙන් පසු පමණක් API ඇමතුම සිදු කරනවා.
Debounce කියන්නේ කුමක්ද? එය අවසන් සිදුවීමෙන් පසු නියමිත කාලයක් (සාමාන්යයෙන් 300‑500ms) ගත වීමට පෙර කාර්යයක් ක්රියාත්මක නොකිරීමයි. උදාහරණයක් ලෙස, පරිශීලකයා "React" කියලා ටයිප් කරන විට, 5 වරක් ඇමතුමක් එවනවා නම්, debounce භාවිතා කරලා අවසන් වචනය "React" ලැබෙන තුරු එකම ඇමතුමක් පමණක් යවන්න පුළුවන්.
React හි useDebounce hook එකක් සාදා ගැනීම ඉතා සරලයි. src/hooks/useDebounce.js ෆයිලයක් තනන්න. JavaScript අනුව:
import { useEffect, useState } from "react";
function useDebounce(value, delay = 500) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debouncedValue;
}
export default useDebounce;TypeScript සඳහා සමාන කේතය <T> generic එකක් එක්කර ලියන්න පුළුවන්. Hook එකේ මූලික අදහස වන්නේ, value වෙනස් වුනත්, නව timer එකක් ආරම්භ කරලා, පැරණි timer එක clear කරලා, අවසන් වරට ලබාදුන් value එකක් පමණක් debouncedValue ලෙස සුරකින්නයි.
Hook එක භාවිතා කිරීමේ උදාහරණයක් ලෙස සරල සෙවුම් කොටුවක් ගන්න. useDebounce භාවිතා කරලා debouncedQuery ලැබෙන විට API ඇමතුමක් සිදු කරමු. මෙහෙම කරලා, පරිශීලකයා ටයිප් කරන අතරතුර අතිරේක ඇමතුම් නොවෙයි.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ වැඩිම සංඛ්යාවක තරුණ සංවර්ධකයින් React පදනම් කරගත් වෙබ් යෙදුම් නිර්මාණය කරන අතර, API ඇමතුම් අධික වීම නිසා ලැබෙන ප්රතිචාර කාලය වැඩිවීම ප්රධාන ගැටලුවක්. Debounce hook එකක් භාවිතා කිරීමෙන්:
- අවශ්ය නොවන ජාල පණිවිඩ අඩු වීමෙන් පරිශීලක අත්දැකීම ඉක්මනින් වේ.
- බැක්‑එන්ඩ් සේවාදායකයේ බර අඩුවීමෙන් පද්ධතියේ ස්ථාවරතාව වැඩි වේ.
- කොඩ් පදනම පැහැදිලි, නැවත භාවිතා කළ හැකි කොටස් ලෙස සංවිධානය වීම නිසා කණ්ඩායම් වැඩ ඉක්මනින් කරගත හැක.
- ලෝකයේ අලුත්ම React තාක්ෂණයන් අධ්යයනය කරන සිසුන්ට, මේ hook එක උදාහරණයක් ලෙස කුමන ප්රතිපත්තියක් අනුගමනය කරනවාද කියා ඉගෙන ගැනීමට හැකියාව ලැබේ.
අදාලව, ස්ථානීය startup කණ්ඩායම්වලට API පරිමාව අඩු කරලා, සර්වර් ගාස්තු අඩු කිරීම සහ පරිශීලකයන්ට වේගවත් සෙවුම් අත්දැකීම ලබා දීමේ වාසිය ලැබේ.
අවසන් වශයෙන්, useDebounce hook එක ඔබේ React ව්යාපෘතියේ කාර්ය සාධනය ඉහළ දැමීමට අත්යවශ්ය උපකරණයක්. එය ඔබේ කොඩ් පදනම සරල කරලා, පරීක්ෂා කිරීම සහ නඩත්තු කිරීම පහසු කරයි. ඔබේ අලුත්ම යෙදුමට මේ hook එක එක්කරලා, පරිශීලකයන්ට තදින්, මෘදු ලෙස සෙවුම් අත්දැකීමක් ලබා දෙන්න.
