React හි memo API

ඊළඟ hook එක ගැන සලකා බලමින් සිටින අතරතුර, අපට ප්‍රයෝජනවත් වන memo API memo ගැන සඳහන් කිරීම අවශ්‍යයි, එය component එකේ prop වෙනස් නොවන්නේ නම් එය නැවත render කිරීම වැළැක්වීමට අපට උපකාරී වේ.

අපි එය උදාහරණයක් මගින් විශ්ලේෂණය කරමු. App component එකක් සාදමු, එහි input ක්ෂේත්‍ර දෙකක් ඇත, උපකල්පනය කරන්නේ නම සහ අනුනාමය ඇතුළත් කරනු ලබන බවයි:

return (
	<div>
		<label>
			නම:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			අනුනාමය:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

අපි ඒවා සඳහා state component එක ආරම්භයේදීම එකතු කරමු:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

අපි තවත් child component Child.js එකක් සාදමු, එය ආමන්ත්‍රණයක් අඩංගු ප්‍රදර්ශනය කිරීමට ඉඩ දෙන්න, එහි ඇතුළත් කරන නම ප්‍රදර්ශනය වේ. එසේම, මෙම component render වන සෑම අවස්ථාවකම 'child render' යන පේළිය console එකේ ප්‍රදර්ශනය වේ:

function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
}

අපි Child component එක ප්‍රධාන component එකේ අවසාන input එකට පසුව එකතු කරමු සහ prop එකක් ලෙස එයට නම පවරමු:

<Child name={name} />

අපි එය ප්‍රධාන component එකට import කරමු:

import Child from './Child';

දැන් අපි console එක විවෘත කර input ක්ෂේත්‍රවලට නම සහ අනුනාමය ඇතුළත් කරමු. මෙහි අපට පෙනෙන්නේ, අනුනාමය සඳහා වූ ක්ෂේත්‍රයට අක්ෂර ඇතුළත් කරද්දී, අපගේ child component සෑම අවස්ථාවකම නැවත අඳිනු ඇති බවයි. ගැටළු නැත, මන්ද අපගේ component එක කුඩාය. නමුත් හිතන්න, මෙම component එක දත්ත විශාල ප්‍රමාණයක් ප්‍රදර්ශනය කරන අතර ඒ සමඟම, සෑම අවස්ථාවකම නැවත ඇඳීම සිදුවේ නම්.

දැන් අපි child component එක memo තුළට wrap කරමු, සහ render කිරීම කෙසේ වෙනස් වේදැයි බලමු. මුලින්ම අපි memo import කරමු:

import { memo } from 'react';

ඉන්පසු අපි නව විචල්‍යයක් සාදා අපගේ Child, memo මගින් wrap කරන ලද, එයට පවරමු. අපට පහත functional expression එක ලැබේ:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
});

Console එක විවෘත කර නැවතත් නම සහ අනුනාමය input ක්ෂේත්‍රවලට ඇතුළත් කරමු. දැන් අපට පෙනෙන්නේ, අනුනාමය ඇතුළත් කරද්දී, අපගේ child component නැවත ඇඳීම සිදු නොවන බවයි.

මතක තබා ගත යුතු දෙය නම්, prop වෙනස් නොවුවද component එක විසින් භාවිතා කරන state හෝ වෙනස්කම් භාවිතා කරන context වෙනස් වුවහොත් මෙය ක්‍රියා නොකරන බවයි.

මෙම පාඩමේදී අපි සාදූ App component එකේ කේතය ගන්න, එහි පළමු input එක පමණක් තබන්න. React component එකක් වන Text සාදන්න, එය 'long text' යන පාඨය සමඟ ඡේදයක් අඩංගු වන අතර, එය App හි input එකට පසුව තබන්න.

Text component එකට console.log('text render'); යන පේළිය එකතු කරන්න. Input ක්ෂේත්‍රයට අක්ෂර ඇතුළත් කරන විට Text component එක සෑම අවස්ථාවකම නැවත අඳින බවට වග බලා ගන්න.

දැන් Text component එක memo මගින් wrap කරන්න. Input ක්ෂේත්‍රයට අක්ෂර ඇතුළත් කරන විට Text component එක නැවත නැවත අඳිනු නොලබන බවට වග බලා ගන්න.