React හි useEffect හි යැපීම්

දැන් අපි බොත්තමක් ඔබා වර්ණය වෙනස් කරමු. වර්ණය සඳහා color නම් ස්ථිතියක් (state) ගොඩනඟා ගනිමු, එයට ආරම්භක අගයක් පවරමු:

const [color, setColor] = useState('green');

අපගේ useEffect හි ඇති string අගය අපගේ ස්ථිතිය (state) සමඟ ප්‍රතිස්ථාපනය කරමු සහ එය චතුරස්ර කොටු වරහන් තුළ ඇති යැපීම් ලැයිස්තුවට එකතු කිරීමට අමතක නොකරමු. දැන් සෑම අවස්ථාවකදීම ඉරියව්ව ක්‍රියාත්මක වනු ඇත color ස්ථිතිය (state) වෙනස් වූ විට:

function App() {
	useEffect(() => {
		document.body.style.backgroundColor = color;
	}, [color]);

	...
}

දැන් අපි අපගේ සංරචකයට එකතු කරමු වර්ණය වෙනස් කිරීම සඳහා බොත්තමක්:

return (
	<div>
		<h1>React App</h1>
		<button onClick={changeColor}>change</button>
	</div>
);

අපි මූසික ස්පර්ශක (click handler) ශ්‍රිතය ද එකතු කරමු, එය අපගේ වර්ණය තැඹිලි පැහැයට (orange) වෙනස් කරනු ඇත:

function changeColor() {
	setColor('orange');
}

පරිශීලක නාමය සමඟ ස්ථිතියක් (state) ලබා දී ඇත. සෑම විටම සහතික වන පරිදි සකසන්න නම වෙනස් වන විට, එහි අගය ස්ථිතිය (state) බ්‍රවුසරයේ දේශීය ගබඩාවට (local storage) ලියා තබනු ලැබේ.