Kichocheo cha Athari useEffect katika React

Kwa kufanya kazi na athari hutumiwa kichocheo useEffect. Tuangalie jinsi kinavyofanya kazi.

Kwanza, tuingize kichocheo chetu:

import { useEffect } from 'react';

Tutengeneze sehemu (komponenti) App, iliyo na kichwa:

function App() {
	return (
		<div>
			<h1>Programu ya React</h1>
		</div>
	);
}

export default App;

Tuchukulie kwamba tunahitaji kufanya kitendo fulani baada ya uwasilishaji (rendering), kwa mfano, kuweka rangi ya msingi ya ukurasa wote. Katika kesi hii, mfumo wa nje utakuwa DOM ya kivinjari.

Tutumie kichocheo chetu:

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

Kigezo cha pili kinapeanwa safu ya tegemezi. Hujumuisha thamani zinazotumika na kazi za sehemu (komponenti). Kwa sasa tumesiacha wazi. Kwa hali hii, rangi itawekwa kuwa kijani mara moja tu baada ya uwasilishaji. Haiwezekani kuondoa kigezo cha pili kabisa, kwa sababu sehemu yako inaweza kuingia kwenye mzunguko usio na mwisho.

Kwa kutumia kichocheo useEffect badilisha kichwa (title) cha ukurasa.