API memo katika React

Kabla hatujajadili ndoano ifuatayo, ni muhimu kutaja pia API muhimu memo, ambayo inatusaidia kuepuka uchoraji upya wa komponenti, ikiwa props zake hazijabadilika.

Wacha tuichambue kwa kutumia mfano. Tuunde komponenti App, ambayo itakuwa na maingizo mawili, ambayo, tuseme, huandikwa jina na jina la ukoo:

return (
	<div>
		<label>
			jina:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			jina la ukoo:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Wacha tuongeze katika mwanzo wa komponenti hali zake:

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

Wacha tufanye komponenti ya mtoto Child.js, iwe inatoa salamu, ambayo itaonyesha jina linaloingizwa. Pia katika konsole itatolewa mstari 'child render' kila wakati komponenti hii inapochorwa upya:

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

Wacha tuongeze Child kwenye muundo wa msingi wa komponenti baada ya kiingilio cha mwisho na tupeane jina kama props:

<Child name={name} />

Wacha tuingize kwenye komponenti kuu:

import Child from './Child';

Sasa tufungue konsole na tuwe tukiandika herufi kwenye sehemu za kuingiza jina na jina la ukoo. Hapa tutaona kwamba hata tunapoingiza herufi kwenye sehemu ya jina la ukoo, komponenti yetu ya mtoto itachorwa upya kila wakati. Hakuna shida, kwa sababu komponenti yetu ni ndogo. Lakini fikiria ikiwa komponenti hii ingekuwa inaonyesha idadi kubwa ya data na wakati huo huo, inachorwa upya kila wakati.

Sasa wacha tufunge komponenti ya mtoto kwenye memo, na tuone jinsi uchoraji upya unavyobadilika. Kwanza tuingize memo ndani yake:

import { memo } from 'react';

Kisha tuunde tofauti mpya na tuipe Child yetu, iliyofungwa katika memo. Tutapata yafuatayo usemi wa kazi:

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

Tufungue konsole na tuanze tena kuingiza jina na jina la ukoo kwenye sehemu. Sasa tunaona kwamba tunapoingiza jina la ukoo, komponenti yetu ya mtoto haichorwi upya.

Ni muhimu kukumbuka kuwa hii haitaenda kufanya kazi, ikiwa, licha ya props zisizobadilika, zitabadilika hali, zinazotumika na komponenti au muktadha, unaotumia mabadiliko.

Chukua msimbo wa komponenti App, ambayo tulifanya katika somo hili, uache ndani yake kiingilio cha kwanza tu. Unda React komponenti Text, iliyo na aya na maandishi 'long text', na uiweke katika App baada ya kiingilio.

Katika komponenti Text ongeza mstari console.log('text render');. Hakikisha kuwa wakati wa kuingiza herufi kwenye kiingilio komponenti Text inachorwa upya kila wakati.

Sasa fungua komponenti Text kwenye memo. Hakikisha, kwamba wakati wa kuingiza herufi kwenye kiingilio komponenti Text haichorwi upya tena.