Huku i Efektit useEffect në React

Për të punuar me efektet përdoret huku useEffect. Le të shohim se si funksionon.

Së pari le ta importojmë hukun tonë:

import { useEffect } from 'react';

Le të krijojmë një komponent App që përmban një titull:

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

export default App;

Supozojmë se duhet të bëjmë një veprim pas renderimit, për shembull, të vendosim ngjyrën e sfondit të gjithë faqes. Në këtë rast, sistemi i jashtëm do të jetë DOM i shfletuesit.

Le të aplikojmë hukun tonë:

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

Në parametrin e dytë kalojmë një grup varësish. Ato përfshijnë vlerat e përdorura nga funksionet e komponentit. Tani për tani i kemi lënë bosh. Në këtë rast, ngjyra do të vendoset në të gjelbër vetëm një herë pas renderimit. Nuk mund ta heqim plotësisht parametrin e dytë, sepse komponenti juaj mund të hyrë në një ciklik të pafund.

Duke përdorur hukun useEffect, ndryshoni titullin e faqes.