React යෙදුම්වල අංගයක් මතකයෙහි පළමු වරට රූප සටහන් කරගැනීමේදී, එහි පළල සම්පූර්ණයෙන්ම ගණන් කරයි. පරිශීලකයා පසුව පාර්ශවික තීරුව (sidebar) සඟවා දැමුවහොත්, අංගයේ පළල අහම්බෙන් 300px වැඩි වෙයි. එම වෙනසක් හඳුනා ගැනීමට window.resize සිදුවන්නේ නැති නිසා, චාට් එක දැන් අති විශාල කොටසක ඇතුළත පෙනෙයි.
වින්ඩෝව වෙනස් නොවීම, පාර්ශවික තීරුව, flex sibling එකක් එක්වීම, අක්කෝඩියන් විහිදීම වැනි බොහෝ ක්රියාවලීන් අංගයේ ප්රමාණය වෙනස් කරයි. ඒ සඳහා බ්රවුසරය විසින් සපයන ResizeObserver API එක අංගයම නිරීක්ෂණය කරනවා. නමුත් මේ API එක අතේ ගන්නා විට, මවුන්ට්/අනමවුන්ට් ජීවිත චක්රය හසුරවන්නට කාලය ගත වේ.
ඒ අඩුවට @reactuses/core පැකේජයේ useResizeObserver Hook එක හඳුන්වා දී ඇත. මේ Hook එක මවුන්ට් වන විට අංගය නිරීක්ෂණයට ගනී, අනමවුන්ට් වන විට ස්වයංක්රීයව විච්ඡේදනය (disconnect) කරයි. කේතය පහත පරිදි සරලයි:
import { useResizeObserver } from '@reactuses/core';
import { useRef } from 'react';
function Chart() {
const ref = useRef(null);
useResizeObserver(ref, (entries) => {
redraw(entries[0].contentRect.width);
});
return ;
}
මෙම Hook එකේ විශේෂත්වය තුනකි:
- ලක්ෂ්යය (target) වගකීම – ref, Element, හෝ getter function එකක් ලෙස ලබා දිය හැක, එයින් අංගය පූර්ව-මවුන්ට් නොවූ අවස්ථාවල ද නිරීක්ෂණය කරයි.
- කොල්බැක් (callback) ස්ථාවරතාව – රී-රෙන්ඩර් වාරයකදී කොල්බැක් වෙනස් වුවත් observer එක නැවත සකස් නොවේ.
- විකල්ප (options) ගැඹුරු-සසඳනවා – { box: 'border-box' } වැනි object එක සෑම වාරයක්ම නව object එකක් වුවත්, Hook එක අගය (value) අනුව සසඳන නිසා observer එක අඛණ්ඩව ක්රියාත්මක වේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ තාක්ෂණික සංවර්ධනයේ තරුණ සංවර්ධකයින්ට, UI/UX ක්රමලේඛනවල නවතම ප්රවණතා අත්යවශ්යයි. useResizeObserver Hook එක භාවිතා කිරීමෙන්:
- කේතයේ පිරිසිදුභාවය වැඩිවේ – එකම Hook එකින් සියලු අංග ප්රමාණ නිරීක්ෂණය කළ හැක.
- ලීක් (leak) අවදානම අඩු වේ – මවුන්ට්/අනමවුන්ට් පරිපාලනය ස්වයංක්රීයව සිදු වේ.
- අදාල ව්යාපාරික Dashboard, Data Visualization, සහ Mobile Web Apps වල කාර්යක්ෂමතාව ඉහළ යයි.
ඉතින්, ශ්රී ලංකාවේ startups, e‑commerce platforms, හා පළාත් මට්ටමේ අධිකාරී පද්ධතිවල ද්රව්යමය ප්රතිචාර වේගවත් කරගත හැක.
සාරාංශයෙන්, useResizeObserver Hook එක React සංවර්ධනයේ නව මාර්ගයක් වන අතර, අංග ප්රමාණ වෙනස්වීම් හඳුනා ගැනීමට ඉතාමත් පහසු, විශ්වාසනීය, හා කාර්යක්ෂම විසඳුමකි.
