Reaktiviteti i State-ve në React

Tani le të shohim se si funksionon reaktiviteti. Ai bën që kur ndryshohet state-i, ndryshimet menjëherë të shfaqen në ekran.

Le ta shohim me një shembull. Le të themi se kemi një state me emrin e produktit:

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

Le të shfaqim emrin e produktit në HTML:

return <div>
	<span>{name}</span>
</div>;

Tani le të bëjmë një buton, upon clicking i cili do të ndryshojë state-in tonë:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

Në përpunuesin e klikimit, ne përdorim funksionin setName, për të vendosur një emër të ri produkti:

function clickHandler() {
	setName('xxxx');
}

Le të mbledhim të gjithë kodin tonë së bashku. Rezulton se pas klikimit në buton, teksti menjëherë do të ndryshojë në vlerën e re:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

Përdorimi i funksioneve të veçanta përpunuese nuk është i detyrueshëm. Mund të përdorni një funksion anonim arrow:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

Janë dhënë state-et me emrin dhe mbiemrin e user-it. Shfaqini ato në HTML. Bëni butona për të ndryshuar këto state-e.