დამოკიდებულებები useEffect-ში React-ში

ახლა კი ღილაკის დაჭერით ფერის შეცვლა გავაკეთოთ. შევქმნათ state color ფერისთვის, მივანიჭოთ მას საწყისი მნიშვნელობა:

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

ჩავანაცვლოთ სტრიქონული მნიშვნელობა ჩვენს state-ით useEffect-ში და არ დაგვავიწყდეს მისი დამატება დამოკიდებულებების სიაში კვადრატულ ფრჩხილებში. ახლა ეფექტი შესრულდება ყოველ ჯერზე როდესაც state color შეიცვლება:

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

ახლა დავამატოთ ღილაკი ფერის შესაცვლელად ჩვენს კომპონენტში:

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

დავამატოთ ასევე ფუნქცია კლიკის დამმუშავებელი, რომელიც შეცვლის ჩვენს ფერს ნარინჯისფერზე:

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

მოცემულია state მომხმარებლის სახელით. გახსენით ისე, რომ ყოველ ჯერზე როდესაც სახელი შეიცვლება, state-ის მნიშვნელობა ჩაიწეროს ბრაუზერის ლოკალურ საცავში.