Side Effects යනු මොනවාද? 🌐
React component එකක ප්රධානම කාර්යය වන්නේ JSX return කර, UI එක තිරය මත ඇඳීමයි. මෙම ප්රධාන කාර්යයෙන් බැහැරව, component එකක් කරන වෙනත් ඕනෑම ක්රියාවක් **Side Effect** එකක් ලෙස හැඳින්වේ.
උදාහරණ කිහිපයක්:
- Internet එකෙන් දත්ත ලබා ගැනීම (Data fetching from an API).
- Browser එකේ title එක වෙනස් කිරීම (`document.title`).
- Timer එකක් set කිරීම (`setInterval` හෝ `setTimeout`).
- Component එකෙන් පිටත ඇති දෙයකට සවන් දීම (Event listeners).
මෙවැනි දේවල් කෙලින්ම component function එක තුල ලිවීම සුදුසු නැත. මන්ද, component එක render වන සෑම වාරයකදීම එම කේතය ද ක්රියාත්මක වන නිසා අනවශ්ය ගැටළු ඇතිවිය හැක.
`useEffect` Hook එක හඳුනාගැනීම
මෙවැනි Side Effects කළමනාකරණය කිරීම සඳහා React අපට ලබා දෙන Hook එක තමයි `useEffect`.
එහි මූලික ව්යුහය (syntax) මෙසේය:
import { useEffect } from 'react';
useEffect(() => {
// Side Effect එකට අදාළ කේතය මෙතන ලියන්න
}, [dependencies]);
මෙය කොටස් දෙකකින් සමන්විතයි:
- Effect Function එක: පළමු argument එක ලෙස ලබා දෙන function එක. Component එක render වූ පසුව මෙම function එක ක්රියාත්මක වේ. අපේ side effect කේතය ලියන්නේ මෙතනය.
- Dependency Array එක: දෙවන argument එක ලෙස ලබා දෙන array `[]` එක. මෙය ඉතා වැදගත් වේ. මෙමගින් අප React වලට කියන්නේ effect function එක නැවත ක්රියාත්මක විය යුත්තේ කුමන අවස්ථා වලදීද යන්නයි.
- `[count]` ලෙස ලබා දුන්නොත්: මුලින්ම একবার සහ `count` state එක වෙනස් වන සෑම වාරයකදීම effect එක run වේ.
- `[]` (හිස් array එකක්) ලෙස ලබා දුන්නොත්: Component එක මුලින්ම render වන විට පමණක් (එක් වරක් පමණක්) effect එක run වේ.
- Array එකක් ලබා නොදුන්නොත්: Component එක render වන සෑම වාරයකදීම effect එක run වේ (මෙය බොහෝ විට අපි බලාපොරොත්තු නොවන දෙයකි).
Browser Title එක වෙනස් කරමු 📝
දැන් අපි `useEffect` භාවිතයෙන් සරල side effect එකක් අපේ කවුන්ටරයට එකතු කරමු. එනම්, කවුන්ටරයේ අගය වෙනස් වන විට, browser tab එකේ title එක ද `Count: [වත්මන් අගය]` ලෙස වෙනස් කරමු.
ඔබේ `src/Counter.jsx` ගොනුව open කර, එය පහත පරිදි update කරන්න.
// src/Counter.jsx
// 1. useEffect, useState සමග import කරගැනීම
import React, { useState, useEffect } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
// 2. useEffect Hook එක එකතු කිරීම
useEffect(() => {
// 3. Side effect එක: document title එක වෙනස් කිරීම
console.log(`Effect ran! Count is ${count}`); // ඔබට console එකේ බලාගත හැක
document.title = `Count: ${count}`;
}, [count]); // 4. Dependency Array: count වෙනස් ሲවන විට පමණක් මෙය run කරන්න
const increment = () => setCount(c => c + 1);
const decrement = () => setCount(c => c - 1);
const reset = () => setCount(0);
return (
<div className="counter">
<div className="display">
Count: <strong>{count}</strong>
</div>
<div className="controls">
<button onClick={decrement}>-</button>
<button onClick={increment}>+</button>
<button onClick={reset}>Reset</button>
</div>
</div>
);
}
වෙනස බලන්න! 💡
ගොනුව save කළ පසු, ඔබේ browser එක වෙත ගොස් කවුන්ටරයේ බොත්තම් click කරන්න. කවුන්ටරයේ අගය වෙනස් වනවාත් සමගම, browser tab එකේ title එක ද ඒ මොහොතේ ඇති අගයට update වන ආකාරය ඔබට දැකගත හැකි වනු ඇත.