Вобастагиҳо дар useEffect дар React

Акнун биёед рангро бо клик кардан тугма иваз кунем. Як стейти <color> барои ранг созем, ки ба он арзиши ибтидоӣ диҳем:

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

Арзиши сатриро бо стейти мо дар <useEffect> иваз мекунем ва фаромӯш намекунем, ки онро ба рӯйхати вобастагиҳо дар қафаси квадратӣ илова кунем. Акнун таъсир ҳар дафъа дар ҳолати тағйирёбии стейти <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');
}

Стейт бо номи корбар дода шудааст. Чунки ҳар дафъа ном тағйир ёбад, арзиши стейт ба анбори маҳаллии браузер сабт карда шавад.