Dependințe în useEffect în React

Acum să schimbăm culoarea la click buton. Vom crea o stare color pentru culoare, stabilind o valoare inițială:

const [color, setColor] = useState('green');

Vom înlocui valoarea string cu starea noastră în useEffect și nu vom uita să o adăugăm în lista de dependințe în paranteze pătrate. Acum efectul se va executa de fiecare dată când starea color se schimbă:

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

Acum să adăugăm un buton pentru schimbarea culorii în componenta noastră:

return (
	<div>
		<h1>React App</h1>
		<button onClick={changeColor}>change</button>
	</div>
);

Să adăugăm și funcția de handler pentru click, care va schimba culoarea noastră în portocaliu:

function changeColor() {
	setColor('orange');
}

Este dată o stare cu numele utilizatorului. Faceți astfel încât de fiecare dată când numele se schimbă, valoarea starei să fie scrisă în stocarea locală a browser-ului.