Εξαρτήσεις στο useEffect στο React

Τώρα ας αλλάξουμε το χρώμα πατώντας ένα κουμπί. Ας δημιουργήσουμε μια state μεταβλητή color για το χρώμα, ορίζοντάς της μια αρχική τιμή:

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

Ας αντικαταστήσουμε την τιμή string με τη state μεταβλητή μας στο useEffect και ας μην ξεχάσουμε να την προσθέσουμε στη λίστα των εξαρτήσεων σε αγκύλες. Τώρα το effect θα εκτελείται κάθε φορά που αλλάζει η state μεταβλητή color:

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

Ας προσθέσουμε τώρα ένα κουμπί για αλλαγή χρώματος στο component μας:

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

Ας προσθέσουμε επίσης τη συνάρτηση χειριστή του κλικ, η οποία θα αλλάζει το χρώμα μας σε πορτοκαλί:

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

Δίνεται μια state μεταβλητή με το όνομα του χρήστη. Κάντε έτσι ώστε κάθε φορά που αλλάζει το όνομα, η τιμή της state να γράφεται στην τοπική αποθήκη του browser.